Question

我有一个Bootstrap＆＃34; hamburger＆＃34;菜单和Bootstrap轮播。一旦用户点击＆＃34;汉堡包＆＃34;旋转木马滑动就会分散注意力。菜单允许列表向下弹出。

我知道<div id="myCarousel" class="carousel slide" data-interval="false data-ride="carousel">会阻止旋转木马。当用户点击＆＃34;汉堡包时，我正在努力实现这一目标。菜单。

我想我需要一个jQuery click()函数来执行＆＃34;汉堡菜单＆＃34;点击如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".navbar-toggle collapsed").click(function(){
        alert("Clicked.");
    });
});
</script>
</head>
<body>


 <nav class="navbar" id="skew">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar" id="slider-nav"></span>
        <span class="icon-bar" id="slider-nav"></span>
        <span class="icon-bar" id="slider-nav"></span>
      </button>
    </div>    
    <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right" id="second-navbar">
        <li><a href="/about/">ABOUT</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </nav>


</body>
</html>

但是，由于我没有收到警报消息，因此此次点击无效。我是jQuery的新手，所以我不明白什么是不正确的。

这里我可以在加载页面时停止轮播：

<script>
$(document).ready(function(){
      $('#myCarousel').carousel({
         pause: true,
            interval: false
      });

});
</script>

当＆＃34;汉堡包＆＃34;以及如何结合点击和停止以停止旋转木马的任何建议。单击菜单表示赞赏。

- 更新：--- 键入整个类，没有空格允许以下内容并且有效：

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
});

现在，根据我原来的问题，当用户点击汉堡包菜单按钮时，我试图阻止旋转木马滑动。

我在想这样的事情：

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
$('#myCarousel').carousel({
         pause: true,
            interval: false
      });
});

显示不正确。任何建议都表示赞赏。

Answer 1

回到开头你刚开始做的就是选择元素并在这里添加click方法。 document.ready部分只是等待页面完成加载。将它们放在一起.navbar-toggle.collapsed正在等待折叠时将点击添加到元素。

所以现在我们已经这样做了，我们需要玩转盘并让它停下来。所以让我们来看看文档。 http://getbootstrap.com/javascript/#carousel

我们可以使用函数.carousel('pause')。从你看起来的东西开始它也是如此。因此$('#myCarousel').carousel()

和成品......

$(document).ready(function(){

    $('#myCarousel').carousel();

    $(".navbar-toggle.collapsed").click(function(){
        $('#myCarousel').carousel('pause');
    });
});

我希望这有助于让你开始使用jquery - 这个和引导程序是你的优秀工具。

Answer 2

看起来你错过了'。'来自collapsed选择器，所以JQuery知道它是一个类。

$(document).ready(function(){
    $(".navbar-toggle.collapsed").click(function(){
        alert("Clicked.");
    });
});

Answer 3

我认为你想要更接近的东西：

$(".navbar-toggle.collapsed").click(function(){
    alert("Clicked.");
});

.navbar-toggle.collapsed将选择包含“navbar-toggle”和“collapsed”类的任何元素（假设按钮在点击时具有.collapsed类）

Answer 4

OMG！这很安静。就这样做：

$(document).ready(function(){
    $(".navbar-toggle.collapsed").click(function(){
        $("script").remove();
    });
});

单击菜单上的停止轮播

4 个答案: