如果没有子菜单,则需要点击

时间:2013-03-02 16:50:34

标签: javascript jquery accordion

嗨我有一个手风琴菜单,所有工作正常,除非一个部分没有子类别我需要链接转到页面而不是尝试打开一个不在那里的子菜单。

如何在此代码中实现此功能?

$.noConflict();
$(document).ready(function() {

        // Store variables

        var accordion_head = $('ul.accordion > li > a.item'),
            accordion_body = $('ul.accordion li > ul.sub-menu');


        // Click function

        accordion_head.on('click', function(event) {

            // Disable header links

            event.preventDefault();

            // Show and hide the tabs on click

            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }

        });

    });

... HTML

  <div class="Block CategoryList Moveable" id="SideCategoryList">

   <div class="BlockContent" id="dropDowns">
    <ul class="accordion">
    <li><a href="http://site-link.co.uk" >Main Category 1</a>
    <ul class="sub-menu">   <li><a href="http://site-link.co.uk" class="item">item 1</a>

    </li>   <li ><a href="http://site-link.co.uk" class="item">item 2</a>

    </li>   <li ><a href="http://site-link.co.uk" class="item" >item 3</a>

   </li>    <li ><a href="http://site-link.co.uk" class="item">item 4</a>

    </li></ul>

</li>   <li ><a href="http://site-link.co.uk" class="item">Main Category 2</a>

</li>   <li ><a href="http://site-link.co.uk" class="item">Main Category 3</a>


</li>
    </ul> 

2 个答案:

答案 0 :(得分:0)

只是猜测:

// Disable header links

// event.preventDefault(); - handle this below

// Show and hide the tabs on click

if ($(this).attr('class') != 'active'){
    accordion_body.slideUp('normal');
    var subMenu = $(this).next('ul');
    if (subMenu) {
      subMenu.stop(true,true).slideToggle('normal');
      event.preventDefault();
    }
    accordion_head.removeClass('active');
    $(this).addClass('active');
} else {
    event.preventDefault();
}

答案 1 :(得分:0)

在这里你进行http://jsfiddle.net/davidchase03/WaQES/更改,因为第一个没有课程项目

var accordion_head = $('ul.accordion > li > a')

并添加

  // Disable header links
    if (  $(this).next().hasClass('sub-menu')  ) {
        event.preventDefault();
    }