我似乎无法理解为什么在世界上我的幻灯片切换不起作用。谁能告诉我我失踪了什么?然后请向我解释我做错了什么?我在2年多的时间里没有做过web开发,但这一切对我来说都很可靠,不知道我错过了什么。
$(document).ready(
function listItemsSmooth(){
$('.main-ul').children('.li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
$("#newFunction").click(listItemsSmooth);
});

.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;
}

<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;
答案 0 :(得分:0)
有几件事对此有所贡献!首先,当您的脚本应该查找元素.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>
答案 1 :(得分:0)
你需要纠正这么多事情,所以只需比较你的代码和我的代码:
$(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>