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

回答

相關問題