Сделать активным состояние кнопки показать окно поиска

Question

Сделать активным состояние кнопки показать окно поиска

0

У меня есть кнопка с меткой поиска. Идея состоит в том, что когда вы нажимаете кнопку (и помещаете ее в активное состояние), мое поле поиска, которое отображается на дисплее: none становится видимым. Моя текущая настройка, похоже, не работает. Я создал jsfiddle, содержащий мою проблему. Так как это уже есть в ModX, я не могу вставить точный код, но если щелчок на кнопке показывает текст, он дает тот же результат.

<div id="header">
    <div class="search_function">[[$base.search-tpl]]</div>
    <button class="search_button">Search</button>

#header label{
    display:none;
}

#header input{
    width:88%;
    height:30px;
    float:left;
    margin:0px;
    padding:0 0 0 10%;
    text-align:center;
    border-radius:0px;
}

#header button{
    width:12%;
    height:30px;
    margin:0px;
    padding:0px;
    background-image:url('../images/transparent_search_icon30x30.png');
    background-color:#eeeeee;
    background-repeat:no-repeat;
    background-position:center;
}

.search_button:active > .search_function{
    display:all;
}
.search_function{
    display:none;

}

Marco Geertsma 28 апр. 2014, в 10:54

Источник

0

Вы заинтересованы в решении jQuery?
mdesdev 28 апр. 2014, в 08:45
0

Если вы можете объяснить, как я реализую это в моей ситуации, конечно!
Marco Geertsma 28 апр. 2014, в 08:46

Теги:

html

css

modx

1 ответ

Ещё вопросы

Если вы можете объяснить, как я реализую это в моей ситуации, конечно!

mdesdev · Accepted Answer · 2014-04-28T07-32-00.000Z

Хорошо, сначала включите библиотеку jQuery в разделе <head> вашего документа, например

Версия Google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

или загрузите сжатый, производственный jQuery 1.11.0 и поместите его в свою корневую папку, затем включите его так

<script src="jquery-1.11.0.min.js"></script>

затем добавьте ниже сценарий непосредственно перед </body>

<script>
  (function($) {
    $('.search_button').click(function() {
      if($('.search_function').css('display') === 'none') {
         $('.search_function').slideToggle(350);
      }
    });
  })(jQuery);
</script>

Здесь FIDDLE