Question

我似乎无法理解为什么在世界上我的幻灯片切换不起作用。谁能告诉我我失踪了什么？然后请向我解释我做错了什么？我在2年多的时间里没有做过web开发，但这一切对我来说都很可靠，不知道我错过了什么。

＆＃13;

$(document).ready(
function listItemsSmooth(){
    $('.main-ul').children('.li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
   $("#newFunction").click(listItemsSmooth);
});

＆＃13;

.main-li-items{
  display: inline-block;
  text-align: center;
  padding-left: 35px;
}
/*.main-li-items:hover .sub-li-items{
  display:block;
}*/
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
    display: none
}
ul{
  text-align: center;
  position: absolute;
}

＆＃13;

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" 
type="text/javascript"></script>

<nav>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul" id ="newFunction">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</li>
        <li class = "sub-li-items"><a href = "#/">Later</li>
      </ul>
      </li>
    </ul>
  </nav>
</nav>

＆＃13;

Answer 1

有几件事对此有所贡献！首先，当您的脚本应该查找元素.li

时，您的脚本正在查找类li的子元素

此外，CSS隐藏了<li>个元素，而不是<ul>隐藏的元素。

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});

.main-li-items{
  display: inline-block;
  text-align: center;
  padding-left: 35px;
}
.main-li-items > ul {
  display: none;
}
/*.main-li-items:hover .sub-li-items{
  display:block;
}*/
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
}
ul{
  text-align: center;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul" id = "newFunction">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</a></li>
        <li class = "sub-li-items"><a href = "#/">Later</a></li>
      </ul>
      </li>
    </ul>
  </nav>
</nav>

Answer 2

你需要纠正这么多事情，所以只需比较你的代码和我的代码：

Fiddle

$(document).ready(function(){
	function listItemsSmooth(){
            $(this).find('ul').slideToggle('slow');
 	}
	$(".main-li-items").click(listItemsSmooth);
});

.main-li-items{
    display: block;
    text-align: center;
    float: left;
    padding-left: 21px;
}
.main-li-items > ul{
  display: none;
}
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
}
ul{
  text-align: center;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul" id ="newFunction">
      
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
       
       <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
        
      </li>
      
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
        
          <ul>
            <li class = "sub-li-items"><a href = "#/">Email</a></li>
            <li class = "sub-li-items"><a href = "#/">Phone</a></li>
          </ul>
        
      </li>
      
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
         
         <ul>
            <li class = "sub-li-items"><a href = "#/">Recent</a></li>
            <li class = "sub-li-items"><a href = "#/">All</a></li>
          </ul>
          
       </li>
       
      <li class = "main-li-items"><a href = "#">Collaborate</a>
         
         <ul>
            <li class = "sub-li-items"><a href = "#"/>Now</li>
            <li class = "sub-li-items"><a href = "#"/>Later</li>
          </ul>
          
      </li>
      
    </ul>
  </nav>
</nav>

下拉列表不会滑动切换

2 个答案: