Question

使用jquery隐藏另一个父母的孩子

2015-04-30

76

javascript jquery html

我有以下 HTML

<div>
    <div id='a'>
        <ul>
            <li>a</li>
        </ul>
    </div>
    <select>
        <option id='Hello'>Hello</option>
    </select>
</div>

现在当我在 <select> 中选择任何选项时， <ul> 标签应该被隐藏。

我试过了下面但它似乎不起作用。

 $('#Hello').click(function () {
     $(this).closest('#a').find('ul').css('display', 'none');
 });

Answer 1

首先，您需要监听 selectbox 上的 onchange 事件，选项 onclick 不可靠。然后您需要使用 $.fn.prev 而不是 closest 来查找上一个元素：

$('select').change(function () {
    $(this).prev('#a').find('ul').hide();
});

Answer 2

您应该将事件（更改而不是单击）附加到选择元素并检查所选选项是否具有所需的 id，如果是，则隐藏所需的 ul:

 $('select').change(function () {
   $(this).prev().find('ul').toggle($(this).find('option:selected').attr('id')!="Hello");
 }).change();

工作演示

Answer 3

您可以只使用 .hide() 而不是 .css() ，并在选择元素上使用 change 事件：

$('#Hello').on("change", function () {
     $(this).closest('#a').find('ul').hide();
});