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

我试图隐藏任何没有具有特定id的

的

。我有一把小提琴，我正在尝试这一点，但它没有按照我预期的方式工作。我可以把它们全部隐藏起来，但我想继续展示的那个不起作用

HTML

JSFIDLE
我不确定您希望它如何工作，但我修改了您的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>

试着这样做：

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

工作提琴：
除了数字ID的非优点之外

在字里行间阅读，我想你想要这样的东西（打开与标签div相关的UL）：

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

您可能还希望只启动一个（如果有的话）不折叠，这只意味着它们上有一个初始样式。e、 g.在CSS中

#accordion ul {
    display: none;
}

JSFiddle：
更新
如果你想让它有特定的启动行为，你可以把做这项工作的比特计算出来，并在启动时调用它

JSFiddle：
又一次更新
根据评论，理想的行为是简单地显示吸引力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：
这应该足够了。
id
在您的javascript中应该是唯一的，您将标签隐藏在我认为您想要隐藏某个标签下的UL的位置，不是标签本身。@TrueBlueAussie-如果HTML5你可以使用数字，但是如果没有@TrueBlueAussie，CSS你就有麻烦了-我完全同意，我也推荐。。。但这是一种观点，而不是事实……）是的，世界是在HTML4中运行的，但它正朝着使用HTML5的方向发展。HTML5.1夜间规范说。老实说，
id
s以数字开头的不会被格式化。与HTML5规范相比，CSS规范说。但是您可以设置以数字开头的
id
s和
类的样式：-我不能更改html的布局。div元素是一个类似于标题的区域，我只想在ul被激活时它消失。我想你已经发现这不可能在现在起作用了吧？ul是div的兄弟姐妹，而不是孩子。@TrueBlueAussie好吧，即使它是兄弟姐妹，那不意味着类似.next（）的东西可以以某种方式使用吗？@fogolicous:当然，因此我自己的答案使用next（）。这不是我想要的效果。我已经在实际代码中使用了它。我在这里要做的是，当我传递这个地图时，get变量除了景点以外的所有菜单选项都不可见。这说明了一个不同的故事：）所以只要保持对showThis（$（“#景点”）.prev（）的调用就可以了并删除另一部分。它将崩溃除吸引我不想只是崩溃。实际上我想让它不可见。是否有可能使
和不可见？崩溃只是一个术语。。。它目前正在隐藏UL。示例中的
showThis
函数与您所需要的功能非常接近。如果还想隐藏div，则它位于$this变量中，因此隐藏和显示也很简单。你需要非常清楚地解释你想要它做什么，但我现在会猜一猜并再次更新答案。你的最终更新就是我一直在寻找的解决方案。我理解这个术语。我不希望它只是崩溃，我希望它基本上不被用户访问。非常感谢。
if($('.sortCat2').attr('id') == 'attractions'){
$('.sortCat2').css({'display': 'none'});
}

$(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'
        });
    });
});

#accordion ul {
    display: none;
}

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());
});

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());
});