1

このプロジェクトに参加したばかりで、コードは既に作成されていましたが、問題に気付きました。メニューのどこかをクリックすると、全体が金色になり、メニューのそのセクション内のリンクはまったく表示されません。もう一度クリックすると、通常の状態に戻ります。これは Internet Explorer 9 と Chrome でのみ発生し、Firefox では問題ありません。下部のリンクには画像が表示されるため、問題を確認できます。

サイトのモバイルおよび IE8 バージョン用の LI に onclick があるので、素敵なドロップダウン メニューも表示されます。

onclick を削除すると、問題が解決されますが、モバイルおよび IE8 ユーザーのドロップダウンも防止されます。

この問題に関連していると思われるコードは次のとおりです: HTML:

<li id="prospective" class="rightborder" onclick="javascript:showElement('prospective-links')">Future Students
<ul id="prospective-links">
<li><a href="/admissions">Undergraduate Admissions</a></li><li><a href="/morelinks">More  Links</a></li></ul>

JS

function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function()      {$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||     (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}

}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');

s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/
}
} 
else { function showElement(d){ var s=document.getElementById(d).style; 
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; } };

そしてCSS：

#prospective-links li,
#current-links li,
#academic-links li,
#facstaff-links li,
#parent-links li,
#alumni-links li,
#visitor-links li {
   width: 80%;}
prospective-links,
current-links,
academic-links,
facstaff-links,
parent-links,
alumni-links,
visitor-links {
display: none;
}

メニューの問題

4

1 に答える 1

0

いただいた限られた情報で試してみます。

したがって、画像の「将来の学生」の下のセクションは、あなたが話していることです. それをクリックすると、画像のように「金色に変わりました」。

実際に起こったことは、あなたがそれをクリックして消えたということでした. 呼び出している関数によると、これは正しい動作です。表示されていたので非表示にしました。ちなみに、showElementこの関数の名前はひどいものですが、それはそれが行っていることではありませんが、継承したため、制御できない可能性があります。のようなものtoggleElementが良いでしょう。

function showElement(d){ 
    var s=document.getElementById(d).style; 
    if (s.display != "block" ) { 
        s.display = "block"; 
    } else { 
        s.display = "none"; 
    } 
}

私の推測では、モバイルと ie8 では、これらのサブメニューは非表示で開始されるため、この関数は本来の機能を実行します。つまり、最初のクリックでサブメニューを表示し、再度クリックすると非表示にします。ここに示す関数は、幅が949px未満のウィンドウで発生するはずだと言っていますが$(window).width() > 949

それが、私たちがこれまでに持っているものでできる最善のことです。

于 2012-09-12T21:29:00.893 に答える