Div在图像上显示点击jquery

我是jquery代码的新手，我需要一点帮助...所以，我想要做的是，最初隐藏div #searchActive，当我点击图像与id“按”，我希望div #searchActive出现，并再次当我按下该图像时，该div将被隐藏。我知道这件事情之前已经解释的，但我不能让它工作...Div在图像上显示点击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在哪里？ – 2014-11-23 10:00:16

这就是问题所在......我需要JS代码帮助 – Valeriu92 2014-11-23 10:21:37

尝试，在一个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/

好运

来源

2014-11-23 10:32:09 Flo

谢谢，你的代码看起来不错，但是我不能将它实现到我的代码中......我会继续尝试 – Valeriu92 2014-11-23 10:40:33

发生了什么？任何在JS控制台？ JS文件正确包含在页面中？ – Flo 2014-11-23 10:41:10

它没有做什么，当我点击图像，并且我也有一个错误在代码“缺少）后参数列表” – Valeriu92 2014-11-23 10:43:39

我想你想是这样的：

$('#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在图像上显示点击jquery

回答

相关问题