Question

我正在制作带点的地图。单击每个点时，它会打开一个<div>，其中包含与该点相关的表单。

点击该点并点击<div>后，当您点击其他点时，它会关闭<div>，并且会在<div>中打开与最近点击的点相关的新表单。

除非页面刷新，否则如何将<div>打开一次并永不关闭？

<script type="text/javascript">

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".dot").show();

    $('.dot').click(function(){
        $(".slidingDiv").slideToggle("slow");
    });

});

</script>

<script>
jQuery(function(){
         $('#showSingle').click(function(){
               $('.targetDiv').show();
        });
        $('.dot').click(function(){
              $('.targetDiv').hide();
              $('#div'+$(this).attr('target')).show();
        });
});
</script>

Answer 1

首次选择点时，会显示信息。但是当您选择不同的点（甚至是同一个点）时，信息框将关闭。这是因为您使用的是.slideToggle()。您想使用slideDown()和slideUp()，因为slideToggle会根据其当前状态切换显示/隐藏。

我假设如果用户选择已打开的点，则要隐藏信息。以下代码通过使用hasClass()来确定所选点是否也具有selected类。

$('.dot').click(function(){
   //$(".slidingDiv").slideToggle("slow");
   if ($(this).hasClass("selected") {
       $(".slidingDiv").slideUp('slow');
   }
   else {
       $(".slidingDiv").slideDown('slow');
   }
});

- 了解有关jQuery effects

的更多信息

Answer 2

您可以为点打开一个单独的类来打开div但不会关闭目标div，然后在分配点击处理程序时使用该新类：

$('.dot2').click(function(){
    $('#div'+$(this).attr('target')).show();
});

除非页面刷新，否则如何确保div在打开后不会关闭？

2 个答案: