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>

注意：我使用mixin（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不执行，即链接未被禁用，它转到链接，i。即index.php?info=basic。所以当我添加关闭窗口语句时，返回false不起作用。我在返回false后尝试添加该行，但它没有关闭下拉菜单。

Answer 1

return false;不起作用可能是因为在到达该行之前存在一些JavaScript错误。在这种情况下，错误是在没有.close()方法的内容上调用close。相反，为了调用Foundation下拉列表的close方法，您必须执行以下操作：

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

我想有一种更优雅的方式来做到这一点，但我发现这是有用的。作为备注，下次请在jsfiddle.net上发布一个最小的例子并在你的问题中链接到它。这使得重现问题变得更加容易。

Answer 2

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

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

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

2 个答案: