我输入的代码有效,但我想使用之前创建的箭头类,而不是以这种方式使用 li.parent
$('.Arrow')。 click(function ()...
但它对我不起作用有可能实现吗?
$('ul#nav li.parent').before('<a class="arrow" href="#"></a>');
$(document).ready(function() {
$('.parent').click(function() {
$('.parent').not(this).find('.sub-nav.visible').removeClass('visible');
$('.sub-nav', this).toggleClass('visible'); //find .sub-nav of clicked .parent
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
.arrow {
width: 10px;
height: 10px;
background: red;
display: inline-block;
float: right;
position: relative;
right: 50%;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">Home
<ul class="sub-nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="parent">About
<ul class="sub-nav">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
<li class="parent">Contact</li>
</ul>
最佳答案
$('.sub-nav').before('<a class="arrow" href="#"></a>');
$(document).ready(function() {
$('.arrow').click(function() {
var list = $(this).parent()
var subList = $(list).children('.sub-nav')
if(!$(subList).hasClass('visible')) {
$('.parent').not(this).find('.sub-nav.visible').removeClass('visible');
}
$(subList).toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
.arrow {
width: 10px;
height: 10px;
background: red;
display: inline-block;
float: right;
position: relative;
right: 50%;
margin-top: 5px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">Home
<ul class="sub-nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="parent">About
<ul class="sub-nav">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
<li class="parent">Contact</li>
<li class="parent">Help
<ul class="sub-nav">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
<li class="parent">Argon
<ul class="sub-nav">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
</ul>
稍微整理了代码库,但这应该可以满足您的需求。
编辑
向 JS 文件添加了一个 if 语句,该语句将处理将切换列表的重复点击列表。
关于jquery - 如何使用带有点击功能的jquery添加的伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55106511/