Question

我正在尝试使用可扩展/可缩放元素的类别索引，当用户单击某个类别时，会使用id为“catSel”重建该类别。

问题是，当用户点击<li>并且“catSel”ID被添加到其中时，它仍然会受到.hide（）的影响;我不希望它。我应该注意，如果用户单击<ul>元素，我就可以使用它，它不会受.hide（）的影响;

我真正想要的是，如果<ul>或其任何<li>元素的ID为'catSel'，则<ul>不会受.hide（）的影响;

以下是代码和示例链接，您可以看到<ul>未展开的情况，但其<li>个孩子之一的ID为'catSel'

编辑：对于错误的解释感到抱歉，我仍然无法解释得很清楚，但我希望如果<ul>或其中一个子<li>元素有一个id="catSel"它不会受$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();影响。

更新：

我添加了这段代码：

// If an elementwith its id="catSel" show all of its parents and also update the parents class

    $('#catSel').parents().show();
    $('#catSel').parents().removeClass('plusimageapply');
    $('#catSel').parents().addClass('minusimageapply');

现在似乎正在按照我想要的方式工作。感谢所有试图理解我的问题并帮助我的人。

jsFiddle：http://jsfiddle.net/nNR9W/

HTML：

<li>
<a href="foo">Catalog Section 4</a>
<ul class="level-1 catList"><li class="plusimageapply">
    <a href="foo">Quick Disconnects</a>
    <ul class="level-2 catList" style="display: none; ">
        <li id="catSel" class="selectedimage">
            <a href="foo">Foster</a></li>
        <li class="selectedimage">
            <a href="foo">General Pump</a>
        </li>
        <li class="selectedimage">
            <a href="foo">Hansen</a>
        </li>
        <li class="selectedimage">
            <a href="foo">Parker</a>
        </li>
    </ul>
    </li>
    <li class="selectedimage">
        <a href="foo">Quick Disconnects O-Rings</a>
    </li>
</ul>

jQuery的：

$(document).ready(function() {
// Set expandable UL elements class to 'plusimageapply'
$('ul.catList li:has(ul):not(#catSel)').addClass('plusimageapply');
// Set unexpandable LI elements class to 'selectedimage'
$('ul.catList li:not(:has(ul))').addClass('selectedimage');
// Set expanded UL elements class to 'minusimageapply'
$('ul.catList li#catSel:has(ul)').addClass('minusimageapply');

// Hide expandable UL elements that are not currently selected with ID 'catSel'
$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();

// **** FIXED MY PROBLEM ****
// If an elementwith its id="catSel" show all of its parents and also update the parents class
$('#catSel').parents().show();
$('#catSel').parents().removeClass('plusimageapply');
$('#catSel').parents().addClass('minusimageapply');
// **************************

// Function for expand/collapse elements
$('ul.catList:not(.level-0) li:has(ul)').each(function(column) {
    $(this).click(function(event) {
        if (this == event.target) {
            if ($(this).is('.plusimageapply')) {
                $(this).children('ul').show();
                $(this).removeClass('plusimageapply');
                $(this).addClass('minusimageapply');
            }
            else {
                $(this).children('ul').hide();
                $(this).removeClass('minusimageapply');
                $(this).addClass('plusimageapply');
            }
        }
    });
});
});

Answer 1

这是我想出来的，试图破译你的问题。希望它有所帮助。

编辑：新http://jsfiddle.net/nNR9W/18/

jQuery选择器，.hide（）UL和LI元素

1 个答案: