たびに私はアクティブにdiv要素をクリックして関連/リンクが強調表示されているダウンメニュー私のドロップをドロップダウン。それは、CSSまたはJQueryの問題です。私はページに投稿されている各投稿を保持する.postHolderクラスを持っています。ここで、画面上のどこをクリックしてメニューを閉じるか、メニューを開くボタンを再度クリックすると、問題はなくなりました。私が次の投稿に行って、それをクリックしてからもう一度クリックするまで、問題はそこにあります。Firefoxがドロップダウンメニューのリンクを強調表示し続けているのはなぜですか?非常に迷惑</p> <p><img src="https://i.stack.imgur.com/qxGbA.png" alt="enter image description here"></p> <p>:おそらくCSS/jQueryの
ブラウザをリフレッシュすると、最初の投稿から問題が戻されます。他のどのブラウザでも起こっていないので、これはかなり混乱しています。ここで
は、メニューのCSSです:
.postMenu {
position:absolute;
display:none;
padding-bottom:20px;
background-color:white !important;
border:1px solid $main-background-color;
height:163px;
width:170px;
top:18px;
right:2px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
color:gray;
z-index:3000;
li {
font-size:12px;
height:33px;
background-color:white !important;
a span {
float:left;
width:160px;
height:33px;
line-height:33px;
padding-left:10px;
color:gray;
&:hover {
background-color:#4D90FE !important;
color:white;
// #DD4B39,#D14836
}
}
&:hover {
background-color:#4D90FE;
color:white;
}
}
.deletePost {
//position:relative;
padding-top:0px !important;
padding-left:0px !important;
height:39px;
width:170px;
text-align:center;
padding-bottom:7px;
border-bottom:1px solid #d9d9d9;
a {
span {
float:left;
padding-left:0px !important;
height:46px !important;
width:170px !important;
line-height:46px;
}
}
a span:hover {
background-color:#DD4B39 !important;
color:white;
// #DD4B39,#D14836
}
}
.reportAbuse {
border-top:1px solid #d9d9d9;
a span:hover {
background-color:gray !important;;
}
}
}
jQueryが包み、このjQueryが関連している:
$(".microposts").on("click", ".micropostOptions", function() {
var postMenu = $(this).find('.postMenu');
if(postMenu.is(':hidden')){
$('.postMenu').hide();
$('.micropostOptions').removeClass("postMenuHoverState");
postMenu.show();
$(this).hide().addClass('postMenuHoverState').show(60);
}else{
postMenu.hide();
$(this).removeClass("postMenuHoverState");
}
$(document.body).click(function(e) {
var clickedElement = $(e.target);
if(clickedElement.is('.micropostOptions:visible')) {
return;
}
$('.postMenu').hide();
$('.micropostOptions').removeClass("postMenuHoverState");
});
});
HTML:
<nav class="micropostOptions">
<ul class="postMenu">
<li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
</li>
<li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
<li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
<li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
<li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
</ul>
</nav>
種類が
私たちをサイトにリンクしている場合は、Firebugを使ってそれを検査し、どこから問題が発生しているかを正確に伝えることができます。 – Alain
ウェブサイトはローカルサーバーにありますが – LondonGuy
まあ、 "魚を釣る人を教える"の精神で、FirefoxのFirebugアドオンをインストールし、強調表示されたテキストを右クリックして "Inspect Element with Firebug"を選択する必要があります。あなたがクリックした要素に適用されます。 – Alain