javascript - 点击后显示隐藏的div

Question

我目前正在研究这个 website .

当我将鼠标悬停在索引中的某个元素上时，会出现一个数字。我正在努力做到这一点，以便在我单击该元素时该数字会保留在那里。如果我点击另一个元素，然后又会消失。

现在我的代码看起来像这样:

$('.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>

新的 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();
    }

^这里的问题是当悬停在元素上时数字不再可见。如果我再次单击相同的元素标题，该数字不会消失。

Answer 1

您不需要使用 javascript 来实现此目的，查看您的代码(在您引用的网站上)，一旦 Accordion 打开，就会设置一个开放类。因此，您可以使用 css 选择器来设置数字的可见性，如下所示:

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

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