Question

我在下拉菜单上工作。此菜单适用于悬停效果。但我有一个问题。单击后，菜单保持打开状态。当我将鼠标拖动到另一个区域时，我希望菜单自动关闭。我在下面提供我的代码。这也是JSFiddle演示 JQUERY CODE

    $(document).ready(function()
{

    $(".change_photo_link").click(function(event)
    {
        var $cover_img = $(event.target).closest(".cover_img");
        if($(".bubmenu", $cover_img).css('display')=='none')
        {
            $(".change_photo", $cover_img).addClass('open');
            $(".bubmenu", $cover_img).css('display','block');


        }
        else
        {
             $(".bubmenu", $cover_img).css('display','none');
             $(".change_photo", $cover_img).removeClass('open');

        }

    });
    $(document).click(function(e)
    {
      if($(e.target).attr('class')!='change_photo_link')
      {

        if($(".bubmenu").css('display')=='block')
        {
            if($('.change_photo').hasClass('open'))
              {
                  $('.change_photo').removeClass('open');
              }
              $(".bubmenu").css('display','none');
        }
      }
});

});

HTML CODE：

  <div class="cover_container">

<div class="cover_img">
    <div class="img_200px200px">

       <a href="#">
         <img src="cvr/gul.jpg" width="198" height="auto" padding="0" />
       </a>
     <div class="change_photo">
            <a class="change_photo_link"></a>
          <div class="bubmenu">
             <ul class="root">
               <li><a href="#">Fotoğrafı değiştir</a></li>
               <li><a href="#">Fotoğrafı kaldır</a></li>
             </ul>
          </div>

        </div>
    </div>
    <div class="img_200px200px">
        <a href="#">
          <img src="cvr/2.jpg" width="198" height="auto" padding="0" />
        </a>
        <div class="change_photo">
            <a class="change_photo_link"></a>
          <div class="bubmenu">
             <ul class="root">
               <li><a href="#">Fotoğrafı değiştir</a></li>
               <li><a href="#">Fotoğrafı kaldır</a></li>
             </ul>
          </div>

        </div>
    </div>
</div>

<div class="cover-big_img">
            <div class="profile_photo">
               <a href="#">
                 <img src="uppic/2.jpg" width="105" height="105" />
               </a>
            </div>

      <a href="index.php"><div class="img_400px400px"><img src="cvr/5.jpg" width="400" height="auto"></div></a>
  </div> 
  <div class="cover_img">
    <div class="img_200px200px">
        <a href="#">
          <img src="cvr/3.jpg" width="198" height="auto" padding="0" />
        </a>
        <div class="change_photo">
            <a class="change_photo_link"></a>
          <div class="bubmenu">
             <ul class="root">
               <li><a href="#">Fotoğrafı değiştir</a></li>
               <li><a href="#">Fotoğrafı kaldır</a></li>
             </ul>
          </div>

        </div>
    </div>
    <div class="img_200px200px">
        <a href="#">
            <img src="cvr/4.jpg" width="198" height="auto" padding="0" />
        </a>
        <div class="change_photo">
            <a class="change_photo_link"></a>
          <div class="bubmenu">
             <ul class="root">
               <li><a href="#">Fotoğrafı değiştir</a></li>
               <li><a href="#">Fotoğrafı kaldır</a></li>
             </ul>
          </div>

        </div>
     </div>


  </div>

和 CSS CODE

  .cover_container {
  width:981px;
  height:400px;
  float:left; 
}
.cover_img {
  float:left;
  width:200px;
  height:400px; 
  background-color:#000;
}
.img_200px200px {
  float:left;
  width:198px;
  height:198px;
  margin:1px;
  overflow: hidden;
}

.img_200px200px img {
   width: 100%;
}
.img_200px200px img.height {
   width: auto;
   height:100%;
}

.cover-big_img {
    float:left;
    width:580px;
    height:400px;   
}

.img_400px400px {
  float:left;
  width:580px;
  height:400px;
  margin:1px;
  overflow: hidden;
  background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
}

.img_400px400px img {
   width: 100%;
   z-index:-1;
   position: relative;
}
.img_400px400px img.height {
   width: auto;
   height:100%;
}

.profile_photo {
    float:left;
    width:105px;
    height:105px;
    border:5px solid #FFF;
    overflow:hidden;
    position:absolute;
    background-color:#FFF;
    margin-left:230px;
    margin-top:130px;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    }
.profile_photo img {
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -o-border-radius:6px;
    }
.change_photo {
  float:left;
  background-color:#fff;
  width:20px;
  height:20px;
  display:none;
  position:absolute;
  z-index:1;
  margin-top:-195px;
  margin-left:167px;

    }
.img_200px200px:hover .change_photo {
    display:block;
    }
a.change_photo_link{
    position:absolute;
    line-height:25px;
    width:20px;
    height:20px;
    cursor:pointer; 
    display:block;
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -moz-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -o-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -ms-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.bubmenu{
   float:left;
    position:relative;
    width:150px;
    height:auto;
    padding:0px;
    border:1px solid #d8dbdf;
    background-color:#f4f4f4;
    margin-top:0px;
    display:none;
    margin-left:-131px;
    margin-top:20px;

}
.change_photo ul {
   margin:0px;
    padding:0px;
    display:block;
    list-style:none;
}
.change_photo ul li a {
    width:150px;
    height:20px;
    line-height:20px;
    display:block;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size:11px;
    color:#3b5997;
    padding:3px 0px;
    cursor:pointer;
    text-decoration:none;
    text-indent:15px;
}
.change_photo ul li a:hover {
    background-color:#25476c;
    color:#fff;
    text-decoration:none;
}
.change_photo.open .change_photo_link { 
                cursor: pointer;
                width: 20px;
                height:20px;
                display: inline-block;  
                line-height: 16px;
                border-radius:0px;
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                text-decoration: none !important;
                background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .u_p_a.open .change_photo_link {
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                 background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
    border-radius:0px;
            }

Answer 1

您可以.on('mouseleave', handler)检测图像上的鼠标何时不再存在。此外，.toggle()和.toggleClass()可以简化您的代码。

$(".change_photo_link").click(function(event)
{
    var $cover_img = $(this).closest(".cover_img");     
    $(".change_photo", $cover_img).toggleClass('open');
    $(".bubmenu", $cover_img).toggle();
})

$(".cover_img").on( "mouseleave", function(){
    $('.change_photo', this).removeClass('open');
    $('.bubmenu', this).hide();
});

FIDDLE

Answer 2

或者你可以这样做：

演示：JSFiddle

$(".change_photo_link, .bubmenu").hover(
    function(event) {
        var $cover_img = $(event.target).closest(".cover_img");
        if (!this.className === 'bubmenu') {
            $cover_img.find(".change_photo").addClass('open');
        }
        $cover_img.find(".bubmenu").css('display','block');
    },
    function(event) {
        var $cover_img = $(event.target).closest(".cover_img");
        $cover_img.find(".bubmenu").css('display','none');
        $cover_img.find(".change_photo").removeClass('open');
    }
);

Jquery和css下拉菜单mouseleave并单击

2 个答案: