使用JavaScript关闭基础4下拉按钮菜单窗口

Question

我正在努力解决JavaScript/jQuery问题。我正在开发基础4.我有一组5个按钮。其中两个按钮是dropdown buttons。当下拉按钮被按下时，一个窗口显示下拉选项（链接）。

<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> 

注：我被混入（class="not_active_button_dropdown"）创造了青菜我自己的按钮类。

现在我开发了一个脚本，它将php响应加载到div #dropdownwrap中，更改按钮，以突出显示当前已按下的按钮。

<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> 

我对JavaScript或jQuery没有经验。无论如何，问题如下：

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

它被注释掉以上。一切工作正常，我的数据加载和下拉按钮突出显示。问题是脚本执行后，基础4下拉按钮窗口不会关闭。这是因为（我猜）我返回false来阻止链接执行。所以我试图用上面的注释掉线关闭窗口。当我取消注释该行时，窗口关闭，但返回false不执行，即该链接未禁用，则转到链接，即。即index.php?info=basic。所以看来，当我添加关闭窗口语句时，返回false不起作用。我尝试在返回false后添加该行，但它不关闭下拉菜单。

Answer 1

return false;无法正常工作可能是因为在到达该行之前存在一些JavaScript错误。在这种情况下，错误是在没有close方法的东西上调用.close()。相反，为了调用基金会下拉的close方法，你必须做类似如下：

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

我想有一个更优雅的方式来做到这一点，但我发现这个工作。请注意，下次请在jsfiddle.net上发布一个简单示例，并在您的问题中链接到它。这使得再现问题变得更容易。

Answer 2

您还需要附加到下拉ul元素的data-dropdown-content属性。

参考：https://github.com/zurb/foundation/issues/1831#issuecomment-15133817