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来实现此目的，查看您的代码（在您引用的网站上），一旦手风琴打开，就会设置一个开放类。因此，您可以使用css选择器来设置数字的可见性，如下所示：

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

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

Answer 2

试试这个

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

这会获取所点击元素的 id 并显示上一个元素，同时隐藏其他元素。

希望这有帮助！



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

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

这是fiddle

单击后显示隐藏的div

3 个答案: