Question

我是jquery代码的新手，我需要一些帮助......所以，我想要做的是最初隐藏div #searchActive，当我点击id为＃34的图像时;按＆＃34;，我希望div #searchActive出现，当我按下该图像时，div将被隐藏。我知道之前已经解释过这个问题，但我无法让它发挥作用......

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;
}

Answer 1

在您网页上的Javascript文件中试用：

// 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/

祝你好运

Answer 2

我想你想要这样的东西：

$('#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/

图像上的Div显示单击jquery

2 个答案: