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

单击.button打开滑块。单击滑块外的任何位置（包括按钮）关闭它

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/

curl -XPUT 'localhost:9200/your_index -d '
{
  "settings": {
    "analysis": {
      "analyzer": {
        "second": {
          "type": "custom",
          "tokenizer": "standard",
          "filter": [
            "lowercase",
            "myFilter"
          ]
        }
      },
      "filter": {
        "myFilter": {
          "type": "dictionary_decompounder",
          "word_list": [
            "smart",
            "phone"
          ]
        }
      }
    }
  },
  "mappings": {
    "my_type": {
      "properties": {
        "name": {
          "type": "string",
          "analyzer": "second"
        }
      }
    }
  }
}
'

需要切换CSS滑入功能，点击不同的div？

4 个答案: