1

私はJQueryを学ぼうとしていますが、プロセスを理解するのに苦労しています。いくつかの投稿を読みましたが、javascript の理解が不十分なことが妨げになっているのかもしれませんが、学びたいと思っています。私の目標は、メニュー システムにアコーディオン UI を使用することです。メイン メニュー項目 ( #sidebar ul.accordion li a .opener .selected ) が、サブ メニュー ( div.slide ul li a ) の「オープナー」としてだけでなく、リンクとしても機能するようにします。以下に HTML、CSS、および JQuery スクリプトをリストしましたが、私の質問は次のとおりだと思います。

Q: 私の問題は、JQuery の「header: "opener"」または「event: "click"」、または「click(function(){ })」の必要性ですか?
どんな助け（教育）も大歓迎です。

次のHTMLメニュー構造があります...

<div id="sidebar">
 <ul class="accordian">  
   <li>  
     <a href="./mainpagelink.php" class="opener">linkname</a>
   <div class="slide">
     <ul>
       <li><a href="subpagelink.php">sublinkname</a></li>
        ...
     </ul>
   </div>
   </li>
    ...
 </ul>
 ...
</div>

私は次のCSSを持っています...

#sidebar {
 width:210px;
 float:left;
 padding-top:18px;
}
#sidebar .accordion {
 margin:0 0 12px;
 padding:0;
 list-style:none;
 font-size:1.2em;/* 1.1 em */
}
#sidebar .accordion li {
 border-bottom:1px solid #009;
 padding:7px 0 7px 11px;
}
#sidebar .accordion a {outline-style:none;}
#sidebar .accordion a:hover {
 color:#9fa714;
 text-decoration:none;
}
#sidebar .accordion .ui-state-active {
 display:block;
  background:url(../images/arrow-rt.gif) 100% 5px no-repeat;
 margin-right:11px;
 color:#9fa714;
 text-decoration:none;
}
#sidebar .slide {padding:1px 0 0 28px;}
#sidebar .slide ul {
 margin:0;
 padding:0;
 list-style:none;
}
#sidebar .slide ul li {
 border:0;
 padding:4px 0 2px;
}
#sidebar .slide ul li.active a,
#sidebar .slide ul a:hover {
 background:none;
 color:#9fa714;
}

次のjqueryスクリプトがあります...

$(document).ready(function(){  
$('ul.accordion').accordion({
active: ".selected",
autoHeight: false,
header: ".opener",
collapsible: true,
event: "click"
});
4

1 に答える 1

0

その外観から、ツリービュータイプのメニューを作成しています。そういうものとして、私はそれがあなたが望むものだと思います...ツリービュー...アコーディオンではありません。

あなたの例では、アコーディオンを展開する要素として.openerを設定しています。また、別のページへのリンクにする必要があります。両方を持つことはできません。

あなたが試すことができるのは次のようなものです：

+リンク名

これにより、アコーディオンを開く要素がリンクから分離されます。

于 2010-02-19T22:55:56.520 に答える