Div show on image click jquery

Я новичок в jquery-коде, и мне нужна небольшая помощь ... Итак, я хочу, чтобы div #searchActive был изначально скрыт, и когда я нажимаю на изображение с id "press", я хочу, чтобы div #searchActive появлялся, и снова, когда я нажимаю на это изображение, div будет скрыт. Я знаю, что эта вещь была объяснена раньше, но я просто не могу заставить его работать ...Div show on image click jquery

HTML:

<div id="bar"> 
       <ul id="nav_top"> 
        <li class="selected"><a href="#">Home</a></li> 
        <li><a href="#">Producten</a></li> 
        <li><a href="#">Nieuws</a></li> 
        <li><a href="#">Events</a></li> 
        <li><a href="#">Partners</a></li> 
        <li><a href="#">Gallerij</a></li> 
        <li><a href="#">Over</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><img id="press" src="images/search.png" /></li> 
       </ul> 
      </div> 
      <div id="searchActive"> 
       <form> 
        <input type="text" name="search" placeholder="" /> 
        <img src="images/search.png" /> 
       </form> 
      </div>

CSS:

#searchActive { 
    width: 300px; 
    height: 60px; 
    background: url('images/searchBackground.jpg'); 
    position: absoute; 
    float: right; 
    margin-right: 234px; 
} 
#searchActive form { 
    overflow: hidden; 
    float: left; 
    margin: 12px 0 0 12px; 
    border: none; 
} 
#searchActive input[type=text]{ 

    width: 249px; 
    height: 35px; 
    font-size: 16px; 
    border: none; 
} 
#searchActive img { 
    margin-left:5px; 
}

источник

2014-11-23 Valeriu92

А где JS? –

В этом проблема ... Мне нужна помощь с кодом JS – Valeriu92

Попробуйте, что в Javscript файл на странице:

// when DOM is fully loaded from server 
$(document).ready(function() { 

    // init some jQuery elements you need 
    var searchActive = $('div#searchActive'); 
    var press = $('img#press'); 

    // hide on init 
    searchActive.hide() // <-- you can do that in CSS too : #searchActive { display:none } 

    // declare listener for click events on element img#press 
    press.on('click', function(e) { 

     // if visible, hide, if hidden, show 
     searchActive.toggle(); 

     // stop the click event, not really necessary since the clicked element is an img 
     e.preventDefault(); 
    }); // <-- added ");" here 
});

Дополнительная информация:

http://api.jquery.com/toggle/

http://api.jquery.com/on/

http://api.jquery.com/hide/

Успехов

источник

2014-11-23 10:32:09 Flo

Спасибо, ваш код кажется правильным, но я не могу его реализовать в моем коде ... Я продолжу попытку – Valeriu92

Что происходит? Что-нибудь в консоли JS? JS-файл правильно включен в страницу? – Flo

Он ничего не делает, когда я нажимаю на изображение, и у меня также есть ошибка в конце кода «отсутствует» после списка аргументов « – Valeriu92

Я думаю, что вы хотите что-то вроде этого:

$('#press').click(function(){ //when I click on image with id "press" 
    $('#searchActive').toggle(); //I want div #searchActive to appear when I press that image, the div will be hidden 
});

Взгляните на: http://api.jquery.com/click/ и http://api.jquery.com/toggle/

источник

2014-11-23 10:35:01

Div show on image click jquery

ответ

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