0

これは私のhtmlコードです

<ul class="dd-options">
    <li>
        <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child1</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child2</label>
        </a>
    </li>
    <li class="minus">
        <a class="dd-option">
        <label class="dd-option-text">-- Sub_child1</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">Main_parent2</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child3</label>
        </a>
    </li>
</ul>

出力

Main_parent1
  - Main_child1
  - Main_child2
     -- Sub_child1
Main_parent2
  - Main_child3

初めて私の出力は（すでに行われている）

Main_parent1
Main_parent2

Main_parent メニューをホバーすると、Main_child と Sub_child が開きます。しかし、Main_parent をホバーすると、Main_child のみを開く必要があります。Main_child をクリックすると、Sub_child が開きます。

jQuery コード

jQuery('.dd-options .dd-option-text').filter(function () {
    return jQuery.trim(jQuery(this).text())[0] == '-';
}).closest('li').hide().addClass('minus');

jQuery('.dd-options > :not(.minus)').hover(function () {
    jQuery(this).nextUntil(':not(.minus)').show();
}, function () {
    jQuery(this).nextUntil(':not(.minus)').hide();
})

デモ

4

2 に答える 2

0

その理由Sub_child1は、メイン要素の子であるため、サブメニュー用にul別の要素を作成する必要があります。ul

<ul class="dd-options">
  <li>
    <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child1</label>
    </a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child2</label>
    </a>
  </li>
  <ul>
    <li class="minus">
      <a class="dd-option">
      <label class="dd-option-text">-- Sub_child1</label>
      </a>
    </li>
  </ul>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">Main_parent2</label>
    </a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child3</label>
    </a>
  </li>
</ul>

要素ulを含むエクストラに注意してくださいSub_child1

于 2013-10-25T08:10:07.810 に答える