我正在努力解决 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"
) 使用 sass 创建了自己的按钮类。
现在我开发了一个脚本,将 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();
上面已经注释掉了。一切正常,我的数据加载并且下拉按钮突出显示。问题是 foundation 4 下拉按钮窗口在脚本执行后没有关闭。这是因为(我猜)我返回 false 以停止执行链接。所以我尝试使用上面注释掉的行关闭窗口。当我取消注释该行时,窗口关闭但 return false 不执行,即链接未禁用,它转到链接,i。 e. index.php?info=basic
。所以看起来当我添加关闭窗口语句时,return false 不起作用。我尝试在 return false 后添加该行,但它没有关闭下拉菜单。
最佳答案
return false;
不起作用可能是因为在到达该行之前存在一些 JavaScript 错误。在这种情况下,错误是在没有 close
方法的对象上调用 .close()
。相反,为了调用 Foundation 下拉列表的 close
方法,您必须执行如下操作:
$('#prod').foundation('dropdown', 'close', $('#prod'))
我想有一种更优雅的方法可以做到这一点,但我发现它很管用。请注意,下次请在 jsfiddle.net 上发布一个最小示例,并在您的问题中链接到它。这使得重现您的问题变得更加容易。
关于javascript - 使用 javascript 关闭基础 4 下拉按钮菜单窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17880928/