Question

您好我尝试使用带有css的jquery来下拉div。在我的页面上，我有一个下拉菜单，我使用.click来切换toClass。

这是html和jquery

<div class="service">
    <div class="service-btn">
        <h3>head</h3>
    </div>
    <div class="service-info">
        some text
    </div>
</div>

$('.btn-service').click(function() {
    $('.service-info', this).toggleClass('open');
});

出于某种原因，这不起作用。即使我在页面上早些时候使用

<li class="btn-dropdown">
    <ul class="nav-dropdown">
        <li><a href="#">list item</a></li>
        <li><a href="#">list item</a></li>
    </ul>
</li>

$('.btn-dropdown').click(function() {
    $('.nav-dropdown', this).toggleClass('open');
});

这确实有效。当我说它有效时，我的意思是该类被切换并添加到html标签中。

不起作用的那个不会使用toggleClass添加/删除该类。什么都没发生，jquery永远不会被点击触发。

除了类名之外，代码的jquery部分是相同的，所以为什么服务代码不像下拉代码那样工作。是html吗？

Answer 1

像Felix Kling所说的那样没有“.btn-dropdown”。

"<div class="service">" should be changed to "<div class="btn-dropdown">
    <div class="service-btn">
        <h3>head</h3>
    </div>
    <div class="service-info">
        some text
    </div>
</div>

$('.btn-dropdown').click(function() {
    $('.service-info', this).toggleClass('open');
});

“click”函数响应前面的selector元素。您也可以替换"$('.btn-dropdown').click" with "$('.service').click"它应该返回类似的结果

Answer 2

我希望这段代码可以帮到你。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="service">
            <div class="service-btn">
                <h3>head</h3>
            </div>
            <div class="service-info">
                some text
            </div>
        </div>        
        <li class="btn-dropdown">
            <div class="btn-dropdownLi">
                <h3>LI Toggle</h3>
            </div>
            <ul class="nav-dropdown">
                <li><a href="#">list item</a></li>
                <li><a href="#">list item</a></li>
            </ul>
        </li>        
        <script>
        $('.service-btn').click(function() {
            $('.service-info').toggle('');
        });        
        $('.btn-dropdownLi').click(function() {
            $('.nav-dropdown').toggle('');
        });
        </script>
    </body>
</html>

Jquery - 为什么在选择器上使用它不起作用？

2 个答案: