Использование JQuery переключения, чтобы изменить значок кнопки

Я использую команду JQuery переключения, как это:Использование JQuery переключения, чтобы изменить значок кнопки

$(".searchbtn").click(function() { 
    $("#search").toggle(); 
});

Что это лучший способ для меня, чтобы изменить значок поиска в тесной значок после того, переключатель открыл меню?

источник

2015-03-26 Jimmy

Вы можете использовать CSS вместо img тегов, чтобы сделать его более универсальным.

CSS:

.icon-search { 
    background: url("/img/search.svg"); 
    width: 30px; 
    height: 30px; 

} 

// update the width and height as required. 

.icon-close { 
    background: url("/img/close.svg"); 
    width: 30px; 
    height: 30px; 
}

JS:

$(".searchbtn").click(function() { 
    $(this).find("i").toggleClass("icon-search icon-close") 
});

HTML:

<a href="#" class="searchbtn"><i class="icon-search"></i></a>

источник

2015-03-26 14:34:55 mohamedrias

Как о чем-то вроде этого я сделал несколько изменений на вашем HTML CSS и JQuery Fiddle

$('a').click(function(){ 
 
    $(this).toggleClass('close') 
 
})

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.input { 
 
    width:100%; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    background-color: transparent; 
 
} 
 
.header { 
 
    display: block; 
 
    border-bottom: 1px solid #e5e5e5; 
 
    padding: 10px 20px; 
 
} 
 
.nav { 
 
    background-color: white; 
 
    padding: 10px 20px; 
 
} 
 
#search { 
 
    display: none; 
 
    padding-top: 10px; 
 
} 
 
.searchbtn{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
} 
 
.menu-open{ 
 
    background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSaDYCb1sQ4jBwqwAhvjuupepjUw2PTrzJAnFXxA7Q3VsrCHit_Af75fR0'); 
 
    background-size:100% 100%; 
 
} 
 

 
.close{ 
 
    background:url('http://www.wpclipart.com/computer/icons/close_button_red.png'); 
 
    background-size:100% 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body> 
 
    <div class="header"> 
 
<a href="index.html"><img src="./img/logo.svg"></a> 
 

 
<a class="searchbtn menu-open" ></a> 
 

 
     <form id="search"> 
 
      <input type="text" class="input" id="keyword" placeholder="Keyword"> 
 
     </form> 
 
    </div> 
 
    <div class="nav">test</div> 
 
</body> 
 

 
</html>

источник

2015-03-26 14:33:02 Akshay

http://jsfiddle.net/hbz9oa34/3/

Вы можете добавить обертку для кнопки поиска и поиска формы:

<div class="header__search"> 
    ... 
</div>

Затем, нажмите на кнопку поиска вы можете добавить класс к этой обертке, чтобы указать, что поиск открыт:

$('.header__search').addClass('header__search--opened');

Теперь вы можете изменить значок с CSS.

Затем, нажмите на кнопку закрытия вы можете удалить ранее добавленный класс:

$('.header__search').removeClass('header__search--opened');

источник

2015-03-26 14:45:16

Использование JQuery переключения, чтобы изменить значок кнопки

ответ

Смежные вопросы