Question

我的程序是从右到左的jquery滑块的简单示例。我的代码出错是切换div没有在第二次点击时隐藏如果用户也在外面点击那么也需要切换/滑块div应该隐藏。切换属性不起作用。请如果有任何遗漏，请提及谷歌jquery cdn。请解决这个问题。

Here是我的JSFiddle链接。

Answer 1

<强> DEMO

您需要在jquery-ui css部分之前或jquery之前，优先</head>向您的网页添加</body>文件和</body>文件，如下所示。如果在</body>之前加载脚本，而在</head>

之前加载CSS和</head>，脚本就会很好

<!--CSS file for jquery-ui-->
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<!--jquery-{{version}}.js which is mandatory for any jquery script to run-->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>

<!--jquery-ui to make your easing functionality work-->
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

现在使用您的其他JS代码添加以下代码，即将click事件附加到文档，以便在点击document的任何部分时，使用target捕获其e.target，然后查看事件是否是从实际执行切换的元素生成的，如果YES没有做任何事情，如果NO那么继续toggle只有div s { visible

$(document).on('click', function (e) {
  var target = $(e.target);//get the target
  if (!target.closest('.hide-mobile').length) {
    //check if clicked element has its parent .hide-mobile
    //below condition checks that whether divs are visible and if yes then only it should toggle
    if ($('.innerBottom').is(':visible')) {
      $('.innerBottom').toggle('slide', options, duration);
    }
    if ($('.innerTop').is(':visible')) {
      $('.innerTop').toggle('slide', options, duration);

    }
  }
})

Jquery滑块div不起作用

1 个答案: