Question

所以我有一个带链接和子链接的导航栏。我目前在结构ul和li元素中有我的链接和子链接。下拉导航栏使用JavaScript设计，按预期工作，减去一个问题。当显示children元素时，我需要父元素不会消失。我在下面列出了一个截图以及HTML和JS。

Children elements covering parent element

如果有人提供答案，您还可以解释为什么父母会被掩盖吗？我试图在堆栈上找到它并在网上查找并且无法找到我正在寻找的内容。

谢谢一群人！

＆＃13;

function main(){

  $('.sub-elements').hide();
  $('.main-elements').on('click',function(){
      $(this).children().slideToggle(300);
   });
}
$(document).ready(main);

＆＃13;

<div class = "nav-bar">
            <ul class = "nav-drop">
              <li class = "main-elements"><a href = "#">Link 1</a>
                <ul class = "sub-elements">
                  <li><a href = "#">Sub Link 1</a></li>
                  <li><a href = "#">Sub Link 2</a></li>
                </ul>
              </li>
              <li class = "main-elements"><a href = "#">Link 2</a>
                <ul class = "sub-elements">
                  <li><a href = "#">Sub Link 3</a></li>
                  <li><a href = "#">Sub Link 4</a></li>
                  <li><a href=  "#">Sub Link 5</a></li>
                  <li><a href=  "#">Sub Link 6</a></li>
                </ul>
               </li>
               <li class = "main-elements"><a href='#'>Link 3</a>
                <ul class = "sub-elements">
                 <li><a href='#'>Sub Link 1</a></li>
                 <li><a href='#'>Sub Link 2</a></li>
                 <li><a href='#'>Sub Link 3</a></li>
                 <li><a href='#'>Sub Link 4</a></li>
               </ul>
             </li>
            </ul>
          </div>

＆＃13;

结构ul和li元素中的子链接。下拉导航栏使用JavaScript设计，按预期工作，减去一个问题。当显示children元素时，我需要父元素不会消失。我在下面列出了一个截图以及HTML和JS。

Children elements covering parent element

如果有人提供答案，您还可以解释为什么父母会被掩盖吗？我试图在堆栈上找到它并在网上查找并且无法找到我正在寻找的内容。

谢谢一群人！

Answer 1

也许你忘了在jQuery中添加子类

function main(){

$('.sub-elements').hide();
 $('.main-elements').on('click',function(){
  $(this).children('.sub-elements').slideToggle(300);
 });
   }
   $(document).ready(main);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
        <ul class = "nav-drop">
          <li class = "main-elements"><a href = "#">Link 1</a>
            <ul class = "sub-elements">
              <li><a href = "#">Sub Link 1</a></li>
              <li><a href = "#">Sub Link 2</a></li>
            </ul>
          </li>
          <li class = "main-elements"><a href = "#">Link 2</a>
            <ul class = "sub-elements">
              <li><a href = "#">Sub Link 3</a></li>
              <li><a href = "#">Sub Link 4</a></li>
              <li><a href=  "#">Sub Link 5</a></li>
              <li><a href=  "#">Sub Link 6</a></li>
            </ul>
           </li>
           <li class = "main-elements"><a href='#'>Link 3</a>
            <ul class = "sub-elements">
             <li><a href='#'>Sub Link 1</a></li>
             <li><a href='#'>Sub Link 2</a></li>
             <li><a href='#'>Sub Link 3</a></li>
             <li><a href='#'>Sub Link 4</a></li>
           </ul>
         </li>
        </ul>
      </div>

Answer 2

应该有效：

function main() {
  $('.sub-elements').hide();

  $('.main-elements').on('click', function () {
    $(this).find('.sub-elements').slideToggle(300);
  });
}

$(document).ready(main);

覆盖JS中父元素的子元素

2 个答案: