Question

我是Jquery的新手，并且对Jquery函数有一点问题。我从某个地方获得了代码，并想在任何地方添加一个小功能，除了搜索框将隐藏搜索框。

这里是代码

<ul class="tert-nav">
    <li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li>
    <li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li>
    <li class="searchit">
        <img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" />
        <div class="searchbox">
            <img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" />
            <input placeholder="search..." type="text" />
            <input type="submit" value="" />
        </div>
    </li>
</ul>

HTML代码：

@charset "utf-8";
/* CSS Document */

ul.tert-nav {
    float: right;
    position: absolute;
    margin: 0;
    padding: 0;
    right: 0;
    top: 0;
    list-style: none;
}

ul.tert-nav li {
    float: right;
    width: 26px;
    height: 28px;
    background: #3c3c3c;
    text-align: center;
    margin-left: 2px;
    cursor: pointer;
    transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
}

ul.tert-nav li:hover {
    background: #000;
}

ul.tert-nav .search {
    width: 246px;
    text-align: left;
    cursor: default;
}

ul.tert-nav .search:hover {
    background: #3c3c3c;
}

ul.tert-nav .searchbox {
    display: none;
    width: 100%;
}

ul.tert-nav .searchbox .closesearch {
    float: left;
    margin: 6px 4px 0px 4px;
    cursor: pointer;
}

ul.tert-nav .searchbox .closesearch:hover {
    opacity: 0.8;   
}

ul.tert-nav .searchbox input[type=text] {
    float: left;
    width: 184px;
    height: 24px;
    padding: 0px 0px 0px 10px;
    margin: 2px 0px 0px 0px;
    border: none;
    background: url(images/search-bg.png) no-repeat;
    outline: none;
}

ul.tert-nav .searchbox input[type=submit] {
    float: left;
    width: 26px;
    height: 24px;
    margin: 2px 0px 0px 0px;
    padding: 0px;
    border: none;
    background: url(images/search-btn.png) no-repeat;
    outline: none;
    cursor: pointer;
}

CSS：

("SELECT System.FileName,System.ItemPathDisplay,System.DateCreated FROM SystemIndex WHERE SCOPE='file:C:/test'", SearchConnect);

这里是初始状态和点击/打开状态的示例图像，以便直观地了解我尝试做什么。谢谢！ enter image description here

我的Jsfiddle http://jsfiddle.net/johanlie/8doLhp5e/7/

Answer 1

将事件绑定到容器，（这里我将事件绑定到文档本身）。然后检查事件是否未从搜索传播。如果不是来自搜索，请做你的东西。

private Toolbar mToolbar;
private NfcAdapter mNfcAdapter;

private final byte[] SELECT_PPSE = {
        (byte) 0x00, // CLA
        (byte) 0xA4, // INS
        (byte) 0x04, // P1
        (byte) 0x00, // P2
        (byte) 0x0E, // Lc
        0x32, 0x50, 0x41, 0x59, 0x2E, 0x53, 0x59, 0x53, 0x2E, 0x44, 0x44, 0x46, 0x20, 0x31,
        (byte) 0x00
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Setting the Action Bar
    mToolbar = (Toolbar) findViewById(R.id.toolbar);

    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

    // Checking if the NFC is enabled
    mNfcAdapter = NfcAdapter.getDefaultAdapter(this);

    if (!mNfcAdapter.isEnabled())
        Toast.makeText(this.getBaseContext(), "Veuillez activer le NFC dans vos paramètres", Toast.LENGTH_LONG).show();
}

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);

    // Is the intent for a new NFC Tag Discovery
    if (intent != null && intent.getAction() == NfcAdapter.ACTION_TECH_DISCOVERED) {
        Tag tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);
        IsoDep isoDep = IsoDep.get(tag);

        if (isoDep == null)
            Toast.makeText(this.getBaseContext(), "Bon début", Toast.LENGTH_LONG).show();
        else
            Toast.makeText(this.getBaseContext(), "Mauvais début", Toast.LENGTH_LONG).show();
    }
}

@Override
protected void onResume() {
    super.onResume();

    mNfcAdapter.enableForegroundDispatch(this,
            PendingIntent.getActivity(this,
                    0,
                    new Intent(this, getClass()).addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP), 0),
            new IntentFilter[]{new IntentFilter(NfcAdapter.ACTION_TECH_DISCOVERED)},
            new String[][]{new String[]{IsoDep.class.getName()}}
    );

Fiddle

Answer 2

这是你在找什么？

WORKING DEMO

更新代码

$(document).ready(function() {

    // Search
    $('ul.tert-nav li.searchit').click(function() {
        $(this).addClass('search');
        $('.searchbox').fadeIn("slow",function(){
            $("input:text").focus();
        });
        $('ul.tert-nav li img.searchicon').hide();
    });


    $('ul.tert-nav li.searchit img.closesearch').click(function(e) {
        e.stopPropagation();
        $('.searchbox').hide();
        $('ul.tert-nav li').removeClass('search');
    });

    $("input:text").blur(function(e) {
        e.stopPropagation();
        $('.searchbox').hide();
        $('ul.tert-nav li').removeClass('search');
    });

});

Jquery在搜索框外单击时隐藏搜索框

2 个答案: