最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Using javascript to close a foundation 4 dropdown button menu window - Stack Overflow

programmeradmin0浏览0评论

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).

<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>

<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>

Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").

Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.

<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){

var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);

//get 
$.get('index_jq.php', querystring, processResponse).error(errorResponse);

//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");


//if it is a normal button make it active
if ($(this).hasClass("not_active_button")) 
{
$(this).addClass("active_button");
}


//if it is a dropdown button option link make it active 
if ($(this).hasClass("prod")) 
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}

//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
      $('.dropdownwrap').slideDown();
    } else {
      $('.dropdownwrap').slideToggle("slow");
      $('.dropdownwrap').slideDown("slow");
    }



return false; // stop the link

});



function processResponse(data) {

 $('.dropdownwrap').html(data);

 }

function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}

</script>

I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:

//$('ul#prod.f-dropdown').close();

which is mented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above mented out line. When I unment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).

<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>

<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>

Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").

Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.

<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){

var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);

//get 
$.get('index_jq.php', querystring, processResponse).error(errorResponse);

//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");


//if it is a normal button make it active
if ($(this).hasClass("not_active_button")) 
{
$(this).addClass("active_button");
}


//if it is a dropdown button option link make it active 
if ($(this).hasClass("prod")) 
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}

//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
      $('.dropdownwrap').slideDown();
    } else {
      $('.dropdownwrap').slideToggle("slow");
      $('.dropdownwrap').slideDown("slow");
    }



return false; // stop the link

});



function processResponse(data) {

 $('.dropdownwrap').html(data);

 }

function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}

</script>

I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:

//$('ul#prod.f-dropdown').close();

which is mented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above mented out line. When I unment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.

Share Improve this question edited Jul 27, 2013 at 19:58 Adrian Heine 4,1413 gold badges32 silver badges43 bronze badges asked Jul 26, 2013 at 12:09 user2197774user2197774 5011 gold badge7 silver badges23 bronze badges 3
  • On further inspection the the line $('ul#prod.f-dropdown').close() is not causing the popup links to close when unmented. – user2197774 Commented Jul 26, 2013 at 14:10
  • I tested a mouseleave function on the popup menu and I got a javascript error $(ul#prod.f-dropdown) does not have close method. I guess you cannot close a ul. Still trying to find a way to close popup. – user2197774 Commented Jul 26, 2013 at 14:19
  • Basically, I want to prevent the link from being acted on, but still want the popup window to close which return false is preventing. – user2197774 Commented Jul 26, 2013 at 14:35
Add a ment  | 

2 Answers 2

Reset to default 9

The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:

$('#prod').foundation('dropdown', 'close', $('#prod'))

I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle and link to it in your question. This makes reproducing your problem much easier.

You also need the data-dropdown-content attribute attached to the dropdown ul element.

Reference: https://github./zurb/foundation/issues/1831#issuement-15133817

发布评论

评论列表(0)

  1. 暂无评论