JQuery и CSS CSS выпадающего меню мыши и нажмите

Question

JQuery и CSS CSS выпадающего меню мыши и нажмите

0

Я работал над выпадающим меню. Это меню работает с эффектом зависания. Но у меня проблема. После нажатия кнопки меню остается открытым. Когда я перетаскиваю мышь в другую область, я хочу, чтобы меню автоматически закрывалось. Я предлагаю вам свой код ниже. также это JSFiddle demo 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-код:

  <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-код

  .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;
            }

somebodyknowsme 20 март 2014, в 13:26

Источник

0

Разбитые изображения на скрипке затрудняют понимание происходящего.
lshettyl 20 март 2014, в 12:28
0

@LShetty обновил jsfiddle: jsfiddle.net/mustafaozturk74/cGP32/1
somebodyknowsme 20 март 2014, в 12:31
0

@LShetty вы можете проверить еще раз мой дорогой jsfiddle?
somebodyknowsme 20 март 2014, в 13:00
0

просто для точности, когда вы нажимаете на ссылку, открытый класс добавляется к 2 изображениям, потому что у вас есть 2 изображения в div ".cover-img", это то, что вы хотите?
MamaWalter 20 март 2014, в 13:05
0

@MamaWalter Когда вы нажмете на всплывающее меню, откроется меню. но когда вы mauselive в меню, меню не закрывается. Когда я перетаскиваю мышь в другую область, я хочу, чтобы меню закрывалось автоматически.
somebodyknowsme 20 март 2014, в 13:11
0

@MamaWalter MamaWalter, если вы проверите это, я думаю, вы понимаете, что я хотел сделать. jsfiddle.net/mustafaozturk74/cGP32/3
somebodyknowsme 20 март 2014, в 13:12
0

@MustafaOzturk, я только что опубликовал свой ответ. Надеюсь, что это помогло.
lshettyl 20 март 2014, в 13:31

Показать ещё 5 комментариев

Теги:

javascript

jquery

css

2 ответа

0

Или вы можете сделать это:

Демо: 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');
    }
);

lshettyl 20 март 2014, в 10:57

Ещё вопросы

Разбитые изображения на скрипке затрудняют понимание происходящего.
@LShetty обновил jsfiddle: jsfiddle.net/mustafaozturk74/cGP32/1
@LShetty вы можете проверить еще раз мой дорогой jsfiddle?
просто для точности, когда вы нажимаете на ссылку, открытый класс добавляется к 2 изображениям, потому что у вас есть 2 изображения в div ".cover-img", это то, что вы хотите?
@MamaWalter Когда вы нажмете на всплывающее меню, откроется меню. но когда вы mauselive в меню, меню не закрывается. Когда я перетаскиваю мышь в другую область, я хочу, чтобы меню закрывалось автоматически.
@MamaWalter MamaWalter, если вы проверите это, я думаю, вы понимаете, что я хотел сделать. jsfiddle.net/mustafaozturk74/cGP32/3
@MustafaOzturk, я только что опубликовал свой ответ. Надеюсь, что это помогло.

MamaWalter · Accepted Answer · 2014-03-20T11-41-00.000Z

Вы можете .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

но вы заметите, что меню нижнего изображения останется открытым, потому что оба изображения находятся в одном и том же div-файле "cover-img".
да, вы правы, но если я изменю $ cover_img на $ img_200px200px, проблема будет решена.