单击外部的任何位置时隐藏元素

时间:2017-03-30 15:48:34

标签: javascript jquery css

我试图在你点击它之外的任何地方时隐藏一个元素。

单击左上角的CART链接时出现的下拉列表。我似乎面临的问题有两个。

1)当你点击该按钮中的任何内容,然后点击CART时,它会显示然后隐藏.cart-dropdown DIV。我猜它是因为我没有在这段代码中定位正确的类:

$(document).click (function (e) {
  if (e.target != $('.cart-dropdown')[0] && e.target != $('.cart-nav-item')[0] && e.target != $('.cart-full')[0]) {
    $('.cart-dropdown').hide();
  }
});

2).cart-dropdown DIV在你点击它时也会关闭,这是我想要避免的。同样,这必须与上面代码中的语法/逻辑错误有关。

有人可以指出我正确的方向吗?

感谢。

2 个答案:

答案 0 :(得分:1)

如果您更改了检查类和元素的方式,它将起作用。使用下面的代码看一下这个小提琴的工作示例:

https://jsfiddle.net/freginold/kv44k1uu/

HTML:

<div>
  A div
</div>
<br>
<div id='cart' class='cart-dropdown'>
  Cart
</div>
<br>
<div>
 Another Div
</div>

CSS:

div {
  border: 1px solid blue;
  margin: 5px;
  display: inline-block;
}

JavaScript的:

$(document).click (function (e) {
//alert($(e.target).hasClass("cart-dropdown"));
  if (!$(e.target).hasClass('cart-dropdown') && !$(e.target).hasClass('cart-nav-item') && !$(e.target).hasClass('cart-full')) {
    $('.cart-dropdown').hide();
  }
});

你走在正确的轨道上;你只需要像@Our_Benefactors那样通过jQuery来定位元素,然后改变你检查元素类的方式。

答案 1 :(得分:0)

您需要更改

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.cs984x.alrm">
<uses-permission android:name="android.permission.VIBRATE" >
</uses-permission>

    <application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    </application>


    <receiver

    android:name=".MyReceiver" android:process=":remote"

    android:enabled="true">

  <intent-filter>

        <action android:name="com.example.cs984x.alrm.vibrate" />

    </intent-filter>

</receiver>


</manifest>

e.target 

将其视为jquery对象。