jQuery上点击框应保持打开状态?

时间:2015-10-20 07:07:05

标签: jquery

解释起来并不简单......这是我的HTML& jQuery代码:

HTML:

<div class="button">
    search
    <div class="hiddencontent"><input type="search" name="search" /> </div>
</div>

<div class="button">
    phone
    <div class="hiddencontent">9464564654564</div>
</div>

<div class="button">
    mail
    <div class="hiddencontent">example@example.com</div>
</div>

脚本:

$('.button').on('click', function () {
    if ($(this).hasClass('active')) {
        $(this).find('.hiddencontent').fadeOut();
        $(this).removeClass('active');
    } else {
        $('.hiddencontent').fadeOut();
        $(this).addClass('active').fadeIn();
        $(this).find('.hiddencontent').fadeIn();
    }
});

JSfiddle

通过第一个按钮“搜索”我有一个输入框,在其他框上效果还可以。但当我在这个输入框内点击时,框会关闭,我该怎么办才能让它保持打开状态?

4 个答案:

答案 0 :(得分:2)

这是因为输入文本位于附加了事件的父.button中。由此,事件也传播到子元素。你可以在执行其他代码之前检查处理程序的目标。就像这样:

$('.button').on('click', function (e) {
 if($(e.target).is('.button')){
  //rest code
 }
});

<强> Working Demo

答案 1 :(得分:0)

添加此代码:

public void linkActive()
{
    SalesTable table;
    QueryBuildDataSource ds = this.query().dataSourceNo(1);
    ds.clearDynalinks();
    ds.clearRanges();
    for (table = salesTable_ds.getFirst(1) ? salesTable_ds.getFirst(1) : salesTable_ds.cursor(); table; table = salesTable_ds.getNext())
    {
        ds.addRange(fieldNum(SalesLine,SalesId)).value(queryValue(table.SalesId));
    }
    super();
}

JSFIDDLE

答案 2 :(得分:0)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.a0111601.testsplash">

    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".splash"
            android:configChanges="orientation|keyboardHidden|screenSize"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.Translucent.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        </activity>

        <activity
            android:name=".ConnectingScreen"
            android:configChanges="orientation|keyboardHidden|screenSize"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="com.example.a0111601.CONNECTINGSCREEN" />

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

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="com.example.a0111601.MAINACTIVITY" />

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

    </application>

</manifest>

以防止隐藏FIDDLE

答案 3 :(得分:0)

$('.button').on('click', function (e) {
    if($(e.target).is('.button')){
       if ($(this).hasClass('active')) {
                $(this).find('.hiddencontent').fadeOut();
                $(this).removeClass('active');
            } else {
                $('.hiddencontent').fadeOut();
                $(this).addClass('active').fadeIn();
                $(this).find('.hiddencontent').fadeIn();
            }
     }

});

JSFiddle Link