0

我希望摆脱我们当前根据样式的菜单并在它的位置使用 jquery。问题是我们当前的代码使用我们在查询字符串中传递的值来告诉菜单应该打开哪个部分以及应该突出显示该部分中的哪些项目。我一直在尝试使用 jquery 来完成此任务，但我是 jquery 的新手并且正在跌跌撞撞。我已经看到了很多根据样式菜单的示例，但是没有一个允许我传递部分和行以突出显示。

所以我找到了一个使用 jquery 的简单风格菜单，我想如果我有一个无序列表，像这样

<ul id="accordion">
        <li>
            <div>
                Sports</div>
            <ul>
                <li><a href="#">Golf</a></li>
                <li><a href="#">Cricket</a></li>
                <li><a href="#">Football</a></li>
            </ul>
        </li>
        <li>
            <div>
                Technology</div>
            <ul>
                <li><a href="#">iPhone</a></li>
                <li><a href="#" id="c23">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li>
            <div>
                Latest</div>
            <ul>
                <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
            </ul>
        </li>
    </ul>

我应该，使用 jquery 能够执行 $('accordion').find('c23') 并能够向上滑动本节并高亮 href .. 但我无法弄清楚执行此操作的代码.. .这是我到目前为止获得相应效果的内容

 $("#accordion > li > div").click(function () {

            if (false == $(this).next().is(':visible')) {
                $('#accordion ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
        });

这是我在http://viralpatel.net/blogs/2009/09/create-accordion-menu-jquery.html找到的一些代码...

无论如何..希望jquery的人能够帮助我。

谢谢香农

4

2 回答 2

1

我认为您的问题主要在于您在查找代码中缺少“#”，并且您没有访问父元素。这是一个固定的例子：

var wanted_id = 'c23'; // This is the bit you'd get off the querystring.

$(document).ready(function ( ) {
    $("#accordion > li > div").click(function () {

            if (false == $(this).next().is(':visible')) {
                $('#accordion ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
    });

    // This is the bit that handles the highlighting and automatic opening
    $('#accordion').find('#'+wanted_id).css('background-color','blue'); 
    $('#accordion').find('#'+wanted_id).parent( ).parent( ).slideToggle(300);

});

​您可以在 jsfiddle 进行测试：http: //jsfiddle.net/DkZYb/1/

于 2012-05-14T16:34:25.147 回答
0

jquery UI Accordion（可能还有许多其他手风琴插件）提供了一些事件，只要您的手风琴中的当前项目发生更改，就会触发这些事件。您可以处理这些事件并在那里突出显示您的项目。这更容易，更清洁等。

请参阅此事件部分：http: //jqueryui.com/demos/accordion/

$( ".selector" ).bind( "accordionchange", function(event, ui) {
  $(ui.newContent).find("<item to highlight selector").addClass(".highlighted");
});
于 2012-05-14T16:38:07.123 回答