需要通过单击不同的 div 来切换 CSS 滑入功能？

Question

我有这个 JSfiddle，我需要在单击 div 时滑入，而不是在加载页面时滑入。同时应该可以通过单击滑入框外的任意位置来关闭。

$( document ).ready(function() {
    $(function(){
        $(".slide-in").addClass("active");
        console.log($(".slide-in"));   
    });
});

我认为解决方案可能是某种切换系统，但我不知道该怎么做？

谢谢！

Answer 1

试试这个。

var someDiv = document.getElementById('yourDiv');

someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
  //do something  
}

how to make div click-able?

Answer 2

我认为这应该可以解决问题。

编辑：

$( document ).ready(function() {
  $(".button").on("click",function(){
    if($(".slide-in").hasClass("active")){
      $(".slide-in").removeClass("active");
    }else{
        $(".slide-in").addClass("active");
    }  
  });
});

Answer 3

单击 . 按钮打开滑块。单击滑块外的任意位置（包括按钮）将其关闭

var isOpened = false;
$(document).click(function(e) {
  if(isOpened && e.target.className=='slide-in') {
    $(".slide-in").removeClass("active");
    isOpened = false;
  } else if(!isOpened && e.target.className=='button'){
    $(".slide-in").addClass("active");
    isOpened = true;
  }
});

最好是使用 ID。所以你的代码将是：

<div id="slide-in"></div>
<div id="button"></div>

和javascript：

var isOpened = false;
$(document).click(function(e) {
  if(isOpened && e.target.id!='slide-in') {
    $("#slide-in").removeClass("active");
    isOpened = false;
  } else if(!isOpened && e.target.id=='button'){
    $("#slide-in").addClass("active");
    isOpened = true;
  }
});

您还需要将 CSS 从类更改为 ID

Answer 4

https://jsfiddle.net/zer00ne/jne1rasb/

$(document).ready(function() {
  $('.button').on('click dblclick', function(e) {

    $('.slide-in').toggleClass('active');
    e.stopPropagation();

  });
  $(document).on('click', function() {
    $(".slide-in").removeClass("active");
  });
});

需要通过单击不同的 div 来切换 CSS 滑入功能？

Need to toggle CSS slide-in function with click on different div?

javascript

jquery

css

slidetoggle