jquery - 如何使用CSS单击另一个元素时显示一个元素？

Question

我使用此 css 代码在单击搜索 id 标记时显示元素。这可以用 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");
   });
});