jQuery 切换不切换

Question

我有一个页面，其中有一堆假下拉菜单，其编码如下（我无法真正更改 HTML）：

<div class="select">
    <div class="wrapper calcdropdown">
        <a href="#" class="dd-openercalc">Select a calculator</a>
        <a href="#" class="dd-opener pulldown-arrow">&nbsp;</a>
    </div>
    <ul class="selectbox">
        <li>Dropdown item 1</li>
        <li>Dropdown item 2</li>
        <li>Dropdown item 3</li>
    <ul>
</div>

当我单击 calcdropdown DIV 内的任一链接时，我需要切换相应的选择框 UL。当我使用toggle()时，当我第一次单击链接时，选择框 UL 会出现，但当我再次单击链接时，选择框 UL 不会消失。

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // hide all the dropdowns by default
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {
        // hide the dropdowns in case another one's open
        $j(".selectbox").hide();
        var self = $j(this);
        // show the selectbox for this link
        var thisSelectbox = $j(this).parents('.select').children('.selectbox').toggle();
        e.preventDefault();
    });
});

这也不起作用：

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {
        $j(".selectbox").hide();
        var self = $j(this);
        var thisSelectbox = $j(this).parents('.select').children('.selectbox');
        if(thisSelectbox.is(':hidden')) {
            thisSelectbox.show();
        } else {
            thisSelectbox.hide();
        }
    });
});

如何在显示选择框后隐藏它们？

Answer 1

从点击函数中删除 $j(".selectbox").hide(); 。

否则，您总是在点击功能中执行以下步骤：

1. 隐藏元素
2. 切换元素（使其始终可见，因为您之前隐藏了它）

编辑：（我没有意识到您使用多个这些元素）

要隐藏除与单击相关的之外的所有 .selectbox，请使用 not()：

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // hide all the dropdowns by default
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {

        var target=$j(this).parents('.select').children('.selectbox');
            $j('.selectbox').not(target.toggle()).hide();
            e.preventDefault();
    });
});

http://jsfiddle.net/doktormolle/qG8ps/

Answer 2

根据您对其他答案的评论，您需要一个解决方案：

1. 隐藏所有其他菜单
2. 切换当前单击菜单的可见性

这有点混乱，但如果您更改 $j(".selectbox").hide (); 在第一个示例中$j(".selectbox").not($j(this).parents('.select').children('.selectbox')).hide();，你应该得到你所追求的行为。

这将隐藏除与当前链接相对应的元素之外的所有 .selectbox 元素。然后，您对 toggle() 的调用应该按预期工作。