如何让我的手风琴检查 children 以便 parents 也可以点击?
How can I make my accordion check for children so the parents are also clickable?
我的网站应用了以下代码:
$j(".m-accordion-item > a").click(function(e) {
e.preventDefault();
$j(".m-accordion-item > a").removeClass("accordian-active");
$j(".m-accordion-nav ul ul").slideUp();
if (!$j(this).next().is(":visible")) {
$j(this).next().slideDown();
$j(this).addClass("accordian-active");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="m-accordion-nav">
<ul class="ul-reset">
<li class="m-accordion-item dropArrow">
<a href="bespoke-joinery-4-c.asp" class="">Bespoke Joinery</a>
<ul class="ul-reset" style="display: none;">
<li><a href="extra-21-c.asp">extra</a></li>
<li><a href="test-subcategory-1-5-c.asp">Test subcategory 1</a></li>
<li><a href="test-subcategory-10-20-c.asp">Test subcategory 10</a></li>
<li><a href="test-subcategory-2-13-c.asp">Test subcategory 2</a></li>
<li><a href="test-subcategory-3-12-c.asp">Test subcategory 3</a></li>
<li><a href="test-subcategory-4-19-c.asp">Test subcategory 4</a></li>
<li><a href="test-subcategory-5-16-c.asp">Test subcategory 5</a></li>
<li><a href="test-subcategory-6-17-c.asp">Test subcategory 6</a></li>
<li><a href="test-subcategory-7-10-c.asp">Test subcategory 7</a></li>
<li><a href="test-subcategory-8-14-c.asp">Test subcategory 8</a></li>
<li><a href="test-subcategory-9-18-c.asp">Test subcategory 9</a></li>
<li><a href="bespoke-joinery-4-c.asp">View All</a></li>
</ul>
</li>
<li class="m-accordion-item">
<a href="doors-7-c.asp" class="">Doors</a>
</li>
<li class="m-accordion-item">
<a href="windows-8-c.asp">Windows</a>
</li>
</ul>
</nav>
它目前适用于我的 child 锚,但我正在努力想出一个解决方案,让我的 parent 锚也可以点击。
我知道删除 e.preventDefault 允许 parents 工作但是如果没有 parent 锚点工作我就无法到达 children。
似乎我们不了解您的实际问题,因为没有 HTML 对此进行剪辑。
如果您有具有相同 CSS class 的不同元素,则添加使用不同的 CSS class 并编写您的 JS - 您为 child.
$j(".m-accordion-item.parent-item > a").click(function(e) {
// Your stuffs
});
$j(".m-accordion-item.child-item > a").click(function(e) {
// Your stuffs
});
我的网站应用了以下代码:
$j(".m-accordion-item > a").click(function(e) {
e.preventDefault();
$j(".m-accordion-item > a").removeClass("accordian-active");
$j(".m-accordion-nav ul ul").slideUp();
if (!$j(this).next().is(":visible")) {
$j(this).next().slideDown();
$j(this).addClass("accordian-active");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="m-accordion-nav">
<ul class="ul-reset">
<li class="m-accordion-item dropArrow">
<a href="bespoke-joinery-4-c.asp" class="">Bespoke Joinery</a>
<ul class="ul-reset" style="display: none;">
<li><a href="extra-21-c.asp">extra</a></li>
<li><a href="test-subcategory-1-5-c.asp">Test subcategory 1</a></li>
<li><a href="test-subcategory-10-20-c.asp">Test subcategory 10</a></li>
<li><a href="test-subcategory-2-13-c.asp">Test subcategory 2</a></li>
<li><a href="test-subcategory-3-12-c.asp">Test subcategory 3</a></li>
<li><a href="test-subcategory-4-19-c.asp">Test subcategory 4</a></li>
<li><a href="test-subcategory-5-16-c.asp">Test subcategory 5</a></li>
<li><a href="test-subcategory-6-17-c.asp">Test subcategory 6</a></li>
<li><a href="test-subcategory-7-10-c.asp">Test subcategory 7</a></li>
<li><a href="test-subcategory-8-14-c.asp">Test subcategory 8</a></li>
<li><a href="test-subcategory-9-18-c.asp">Test subcategory 9</a></li>
<li><a href="bespoke-joinery-4-c.asp">View All</a></li>
</ul>
</li>
<li class="m-accordion-item">
<a href="doors-7-c.asp" class="">Doors</a>
</li>
<li class="m-accordion-item">
<a href="windows-8-c.asp">Windows</a>
</li>
</ul>
</nav>
它目前适用于我的 child 锚,但我正在努力想出一个解决方案,让我的 parent 锚也可以点击。
我知道删除 e.preventDefault 允许 parents 工作但是如果没有 parent 锚点工作我就无法到达 children。
似乎我们不了解您的实际问题,因为没有 HTML 对此进行剪辑。 如果您有具有相同 CSS class 的不同元素,则添加使用不同的 CSS class 并编写您的 JS - 您为 child.
$j(".m-accordion-item.parent-item > a").click(function(e) {
// Your stuffs
});
$j(".m-accordion-item.child-item > a").click(function(e) {
// Your stuffs
});