如何使用jQuery隐藏具有特定id的ul的div？

Question

我正在尝试隐藏任何没有<div>且具有特定ID的<ul>。我有一个小提琴，我正在尝试这个，但它没有按我预期的方式工作。我可以把它们全部隐藏起来，但我想继续展示的那个并不工作。

HTML

<ul id="accordion">
    <li>
        <div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos</div>
        <ul class="sortCat1" id="zoo">
            <li id="1"><a href="#">1</a></li>
            <li id="2"><a href="#">2</a></li>
            <li id="3"><a href="#">3</a></li>
        </ul>
    </li>
    <li>
        <div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions</div>
        <ul class="sortCat2" id="attractions">
            <li id="1"><a href="#">1</a></li>
            <li id="2"><a href="#">2</a></li>
            <li id="3"><a href="#">3</a></li>
        </ul>
    </li>
    <li>
        <div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining &amp; Shopping</div>
        <ul class="sortCat3" id="dinShop">
            <li id="1"><a href="#">1</a></li>
            <li id="2"><a href="#">2</a></li>
            <li id="3"><a href="#">3</a></li>
        </ul>
    </li>
</ul>

的Javascript

if($('.expand ul').id == 'attractions'){
        $(this).css({'display': 'block'});
    }else{
        $('.expand').css({'display': 'none'});
    }

的jsfiddle http://jsfiddle.net/27Wmm/

Answer 1

讨论数字ID的非优点......

在线之间阅读我认为你想要这样的东西（切换打开与标记div相关联的UL）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/27Wmm/1/

$(function () {
    $('#accordion').on('click', '.expand', function () {
        var $this = $(this);
        // Show the sibling of the clicked div 
        $this.next().css({
            'display': 'inherit'
        });
        // Now hide all others sibling of the non-clicked divs
        $('.expand').not($this).next().css({
            'display': 'none'
        });
    });
});

对于任何类型的菜单，您通常都希望避免选择的任何硬编码，并让它对单击的项目（以及未单击的其他相关项目）进行操作。

你也可能只想开始一个（如果有的话）没有折叠，这只是意味着它们的初始样式。例如在CSS

#accordion ul {
    display: none;
}

JSFiddle：http://jsfiddle.net/TrueBlueAussie/27Wmm/3/

更新

如果您希望它具有特定的启动行为，您可以将执行工作的位分解出来并在启动时调用它。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/27Wmm/4/

var showThis = function ($this) {
    // Show the sibling of the clicked div 
    $this.next().css({
        'display': 'inherit'
    });
    // Now hide all others
    $('.expand').not($this).next().css({
        'display': 'none'
    });
}

$(function () {
    $('#accordion').on('click', '.expand', function () {
        showThis($(this));
    });
    showThis($('#attractions').prev());
});

又一次更新

根据评论，期望的行为是简单地显示吸引力DIV和相关的UL。如果是这种情况（我仍有疑虑），你可以将上面改为：

var showThis = function ($this) {
    // Show the div, then show the sibling of the clicked div 
    $this.css({
        'display': 'inherit'
    }).next().css({
        'display': 'inherit'
    });
    // Now hide all other divs and ULs
    $('.expand').not($this).css({
        'display': 'none'
    }).next().css({
        'display': 'none'
    });
}

$(function () {
    showThis($('#attractions').prev());
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/27Wmm/5/

这应该可以玩很多。

Answer 2

我不确定你是如何期待它的，但是我修改了你的HTML和JS以获得我想你想要的东西：

<ul id="accordion">
<li>
    <div style="background-color: rgb(109, 129, 27);" class="expand" title="Click to Expand">Zoos
    <ul class="sortCat1" id="zoo">
        <li id="1"><a href="#">1</a></li>
        <li id="2"><a href="#">2</a></li>
        <li id="3"><a href="#">3</a></li>
    </ul>
    </div>
</li>
<li>
    <div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Attractions
    <ul class="sortCat2" id="attractions">
        <li id="1"><a href="#">1</a></li>
        <li id="2"><a href="#">2</a></li>
        <li id="3"><a href="#">3</a></li>
    </ul>
    </div>
</li>
<li>
    <div style="background-color: rgb(109, 129, 27);" title="Click to Expand" class="expand">Dining &amp; Shopping
    <ul class="sortCat3" id="dinShop">
        <li id="1"><a href="#">1</a></li>
        <li id="2"><a href="#">2</a></li>
        <li id="3"><a href="#">3</a></li>
    </ul>
    </div>
</li>

$(".expand").each(function()
{
    if($('ul', this).attr('id') != "attractions")
    {
        $(this).css({'display': 'none'});
    }
});

Answer 3

尝试这样的事情：

if($('.sortCat2').attr('id') == 'attractions'){
$('.sortCat2').css({'display': 'none'});
}

工作小提琴：http://jsfiddle.net/robertrozas/27Wmm/2/