使用預先觸發器的jQuery下拉菜單

我想用jQuery來在菜單上添加一個觸發器，然後讓那個觸發器切換子元素。下面的代碼在使用jQuery prepend時不會打開子菜單，任何人都可以提供修復嗎？使用預先觸發器的jQuery下拉菜單

HTML

<ul> 
    <li class="menu-item-has-children">Item 1</li> 
    <ul class="sub-menu"> 
     <li>Sub Item 1</li> 
     <li>Sub Item 2</li> 
     <li class="menu-item-has-children">Sub Item 3</li> 
     <ul class="sub-menu"> 
      <li>Sub Sub Item 1</li> 
      <li>Sub Sub Item 2</li> 
      <li>Sub Sub Item 3</li> 
      <li>Sub Sub Item 4</li> 
      <li>Sub Sub Item 5</li> 
     </ul> 
     <li>Sub Item 4</li> 
     <li>Sub Item 5</li> 
    </ul> 
</ul>

CSS

ul li { 
list-style-type:none; 
} 
.open { 
    width:20px; 
    height:20px; 
    background-color:red; 
    color:#fff; 
    display:block; 
    cursor:pointer; 
    text-align:center; 
} 
.sub-menu { 
    display:none; 
}

jQuery(document).ready(function() { 
jQuery('.menu-item-has-children').prepend ('<a class="open">+</a>'); 
    jQuery('.open').click(function() { 
     jQuery(this).next('.sub-menu').toggle(); 
    }); 
});

JS FIDDLE

謝謝！

來源

2017-06-06 Future Webs

[與子菜單觸發jQuery的菜單（的可能的複製https://stackoverflow.com/questions/44371370/jquery-menu-with-sub-menu-trigger） –

'jQuery（this）.next'不會工作，因爲只有兄弟'.open'具有假定的文本節點。在下降到click函數閉包並引用該變量（可能使用'let'？）或使用'jQuery（this.parentNode）'之前，您需要緩存'this'，但無論如何，您的標記是錯誤的。您不能將不是'li'的元素作爲'ul'的子元素。你的嵌套需求是固定的。 –

所以，我的意思是說你的問題很容易被糾正，但是請先清理你的標記。無效的標記可能會在稍後導致不可預知的行爲。 –

您的代碼問題不是JS而是您的HTML。

作爲約瑟夫Marikle指出：您ul

許可內容零個或多個<li>元件，這又常常包含嵌套<ol>或<ul>元件。

不得有除li以外的任何子元素。

在你的情況下，元素.open沒有兄弟爲此.next()不會找到.sub-menu。

如果移動li.menu-item-has-children裏面你的內心ul你JS工作得很好：

jQuery(document).ready(function() { 
 
    jQuery('.menu-item-has-children').prepend('<a class="open">+</a>'); 
 
    jQuery('.open').click(function() { 
 
    jQuery(this).next('.sub-menu').toggle(); 
 
    }); 
 
});

ul li { 
 
    list-style-type: none; 
 
} 
 

 
.open { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: red; 
 
    color: #fff; 
 
    display: block; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 

 
.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children">Item 1 
 
    <ul class="sub-menu"> 
 
     <li>Sub Item 1</li> 
 
     <li class="menu-item-has-children">Sub Item 3 
 
     <ul class="sub-menu"> 
 
      <li>Sub Sub Item 1</li> 
 
     </ul> 
 
     </li> 
 
     <li>Sub Item 4</li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2017-06-06 14:33:22 empiric

使用預先觸發器的jQuery下拉菜單

回答

相關問題