Question

我在点击搜索ID标签时使用此css代码显示该元素。这可以通过jquery实现，但我只想用css来做这件事。请指教。

   #open_search:active #search{
    display: block;
    transition: all 100ms ease-in-out;
}

HTML

<div class="row-fluid">
            <div class="span2 language pull-right">
                <div class="language-object">
</div>
            </div>
            <span id="open_search" class=" btn glyphicon glyphicon-search"></span>
            <div id="search" class="span3 pull-left">
                <span id="dnn_dnnSearch_ClassicSearch">
    <span class="searchInputContainer" data-moreresults="مشاهده نتایج بیشتر" data-noresult="نتیجه‌ای یافت نشد">
        <input name="dnn$dnnSearch$txtSearch" maxlength="255" size="20" id="dnn_dnnSearch_txtSearch" class="NormalTextBox" autocomplete="off" placeholder="جستجو..." type="text">
        <a class="dnnSearchBoxClearText"></a>
    </span>
    <a id="dnn_dnnSearch_cmdSearch" class="SearchButton pull-left" href="javascript:__doPostBack('dnn$dnnSearch$cmdSearch','')">Search</a>
</span>
                <span id="close_search" class="btn glyphicon glyphicon-remove "></span>
            </div>
            <div id="login" class="span5  pull-left">

<div id="dnn_dnnLogin_loginGroup" class="registerGroup">
    <a id="dnn_dnnLogin_enhancedLoginLink" title="ورود" class="LoginLink" rel="nofollow" onclick="this.disabled=true;" href="http://localhost/dnn_test/Login?returnurl=%2fdnn_test%2fskin2">&nbsp;ورود&nbsp;</a>
</div>
<div id="dnn_dnnUser_registerGroup" class="registerGroup">
    <ul class="buttonGroup">
        <li class="userDisplayName list-inline">
            <a id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام" rel="nofollow" href="http://localhost/dnn_test/Register?returnurl=http%3a%2f%2flocalhost%2fdnn_test%2fskin2">&nbsp;ثبت‌نام</a>
        </li>

    </ul>
</div>
            </div>
        </div>

如果使用css是不可能的，请使用jquery帮助完成此操作。

Answer 1

的CSS：

#search {
    display: none;
    transition: all 100ms ease-in-out;
}

#search.active {
    display: block;
}

jQuery的：

$(function(){
   $("#open_search").click(function(){
       $("#search").toggleClass("active");
   });
});

Answer 2

另一个好处是使用标签和复选框

<label for="openContent">Toggle Content</label>
<input type="checkbox" id="openContent" style="display:none;" />
<div id="myContent">Here!</div>

和CSS

<style>
    #openContent + #myContent {
        display:none;
    }

    #openContent:checked + #myContent {
        display:block;
    }
</style>

见jsFidlde

单击css的另一个元素时如何显示一个元素？

2 个答案: