单击后显示隐藏的div

Question

I'm currently working on this website .

When I hover over a project in my index, a number appears. I am trying to make it so that number stays there if I click on the project. And then disappears again if I click on a different project.

Right now my code looks something like this:

$('.project').mouseover(function(){
    $(this).prev().show()
})  
$('.project').mouseout(function(){
    $(this).prev().hide()
})  
$('.project').click(function(){
    $(this).prev().show()
})

HTML:

            <!-- Project -->
                <div data-accordion>
            <!-- Number -->
                    <div class="number" id="n1">1</div>
            <!-- Title -->
                    <a class="project slide-link" id="p1" data-slide-id="1" data-control>Midi Matilda</a>

            <!-- Tags -->
                    <a class="tag t1">(Identity)</a>
                    <a class="tag t1">(Music)</a>

                        <div data-content>

                            <div class="info">This project is cool.</div>

                        </div>
                </div>

            <!-- Project -->
                <div data-accordion>
            <!-- Number -->
                    <a class="number" id="n2">2</a>
            <!-- Title -->
                    <a class="project slide-link" id="p2" data-slide-id="2" data-control>The Independent</a> 
            <!-- Tags -->
                    <a class="tag t2">(Poster)</a>

                        <div data-content>

                                <div class="info">This project is cooler.</div>

                        </div>
                </div>

NEW JQuery:

    //$('.project').mouseover(function(){
    //    $(this).prev().show()
    //})  
    //$('.project').mouseout(function(){
    //    $(this).prev().hide()
    //})  

    $('.project').click(function(){
        var id = $(this).attr("id");
        hideOthers(id);
        $(this).prev().show();
    });

    function hideOthers(id){
        $('.project').not('#' + id).prev().hide();
    }

^The problem here is that the number is no longer visible when hovering over the project. And the number does not go away if I click on the same project title again.

Answer 1

You don't need to use javascript to achieve this, looking at your code (on the website you referenced), once the accordion is open, an open class is set. So you can use css selectors to set the visibility of the numbers like this:

/* Show on hover */
[data-accordion]:hover > .number {display:block}

/* Show when clicked/open */
[data-accordion].open >  .number {display:block}

Answer 2

Try this

var flag = false;

$('.project').mouseover(function(){
    if(flag == false)
       $(this).prev().show()
})  
$('.project').mouseout(function(){
    if(flag == false)
       $(this).prev().hide()
})  
$('.project').click(function(){
    if(flag == false){
        $(this).prev().show()
    }else{
        $(this).prev().hide()
    }
    flag = !flag;
})

Answer 3

This gets the id of the clicked element and shows the previous element, while hiding the others.

Hope this helps!

    $('.project').click(function(){
      var id = $(this).attr("id");
      hideOthers(id);
      $(this).prev().toggle();
    });

    function hideOthers(id){
      $('.project').not('#' + id).prev().hide();
    }

Here is a fiddle