Jquery菜单更改

时间：2014-06-05 08:55:49

标签： jquery html onclick

我正在尝试编写一个脚本，当我单击文本时，我会使箭头从侧面变为向下，但是当我点击它时隐藏并且只有当我再次单击它时才出现，请帮助任何人？

$('.linha').bind({
    'click': function(){
        var visible = $('.mais_a').is(':visible');
        $('.mais2').hide();
        if(!visible) $('.mais2').show();
    }

})

          <div id="menu">
            <div id="cutelo"><img src="wp-content/themes/PAA/cutelo.png"></div>

            <div id="linha01" class="linha">
                Festival

                <div class="mais_a">
                    ►&nbsp;
                </div>

                <div class="mais2">▼</div>

            </div>

            <div id="submenu01" class="submenu">


                <div id="submenu01_linha02" class="linha">
                    <a href="<?php echo get_permalink( 37 ); ?>">Homenagens</a>
                </div>

                <div id="submenu01_linha03" class="linha">
                    <a href="<?php echo get_permalink( 41 ); ?>">Como Participar</a>
                </div>

                <div id="submenu01_linha04" class="linha">
                    <a href="<?php echo get_permalink( 43 ); ?>">Regulamento</a>
                </div>
            </div>

这是一个Fiddle

编辑：

是否可以将其改编为

         <div id="menu">
            <div id="cutelo"><img src="wp-content/themes/PAA/cutelo.png"></div>

            <div id="linha01" class="linha">
                Festival

                <div class="mais">
                    ►&nbsp;
                </div>

                <div class="mais2">▼</div>

            </div>

            <div id="submenu01" class="submenu">


                <div id="submenu01_linha02" class="linha">
                    <a href="<?php echo get_permalink( 37 ); ?>">Homenagens</a>
                </div>

                <div id="submenu01_linha03" class="linha">
                    <a href="<?php echo get_permalink( 41 ); ?>">Como Participar</a>
                </div>

                <div id="submenu01_linha04" class="linha">
                    <a href="<?php echo get_permalink( 43 ); ?>">Regulamento</a>
                </div>
            </div>

            <div id="linha02" class="linha">
                Secção 2014

                <div class="mais">
                    ►&nbsp;
                </div>
            </div>

所以我可以在两个.mais div中工作吗？

2 个答案:

答案 0 :(得分：1)

您需要调整HTML标记和CSS样式，但这应该有效：

<强> HTML 

<div id="menu_esquerda">
    <div id="menu">
        <div id="cutelo"><img src="wp-content/themes/PAA/cutelo.png"></div>
        <div id="linha01" class="linha">Festival
            <div class="mais_a">►&nbsp;</div>
            <div class="mais2">▼&nbsp;</div>
        </div>
        <div id="submenu01" class="submenu">
            <div id="submenu01_linha02" class="linha"> <a href="<?php echo get_permalink( 37 ); ?>">Homenagens</a></div>
            <div id="submenu01_linha03" class="linha"> <a href="<?php echo get_permalink( 41 ); ?>">Como Participar</a></div>
            <div id="submenu01_linha04" class="linha"> <a href="<?php echo get_permalink( 43 ); ?>">Regulamento</a></div>
        </div>
        <div id="linha02" class="linha">Secção 2014
            <div class="mais_a">►&nbsp;</div> <!-- Removed the div with class mais_b -->
            <div class="mais2">▼&nbsp;</div> <!-- And re-used the same ones you had before (previous menu item) -->
        </div>
        <div id="submenu02" class="submenu">
            <div id="submenu02_linha02" class="linha"> <a href="<?php echo get_permalink( 79 ); ?>">Cinema Fantástico</a></div>
            <div id="submenu01_linha04" class="linha"> <a href="<?php echo get_permalink( 83 ); ?>">Cinema Português</a></div>
            <div id="submenu01_linha05" class="linha"> <a href="<?php echo get_permalink( 85 ); ?>">Premiere e Panorama</a></div>
        </div>
        <div id="linha03" class="linha"><a href="<?php echo get_permalink( 9 ); ?>">Notícias</a></div>
        <div id="linha06" class="linha"><a href="<?php echo get_permalink( 13 ); ?>">Premiados</a></div>
        <div id="linha07" class="linha"><a href="<?php echo get_permalink( 15 ); ?>">Newsletter</a></div>
        <div id="linha09" class="linha"><a href="<?php echo get_permalink( 19 ); ?>">Contactos</a></div>
        <div id="linha10" class="linha"><a href="https://www.essr.net/cdcomunicacao/al5580/PAA/wp-content/themes/PAA/animpaa.swf" rel="shadowbox"> Animação </a></div>
    </div>
</div>

<强>的Javascript 

$(".mais2").hide(); // Hide the down arrows.

$(".linha").on("click", function() {
    // Toggle visibility of element of class mais_a which is a 
    // child of the clicked element.
    $(".mais_a", this).toggle();

    // Toggle visibility of element of class mais2 which is a 
    // child of the clicked element.
    $(".mais2", this).toggle(); 

    // Toggle visibility of element of class submenu which is 
    // the next sibling of the clicked element.
    $(this).next(".submenu").slideToggle(); 
});

Demo

修改

根据您的要求，这是一个使用单个班级mais的解决方案：

<强> HTML 

<div id="menu_esquerda">
    <div id="menu">
        <div id="cutelo">
            <img src="wp-content/themes/PAA/cutelo.png" />
        </div>
        <div id="linha01" class="linha">Festival
            <div class="mais"></div>
        </div>
        <div id="submenu01" class="submenu">
            <div id="submenu01_linha02" class="linha"><a href="<?php echo get_permalink( 37 ); ?>">Homenagens</a></div>
            <div id="submenu01_linha03" class="linha"><a href="<?php echo get_permalink( 41 ); ?>">Como Participar</a></div>
            <div id="submenu01_linha04" class="linha"><a href="<?php echo get_permalink( 43 ); ?>">Regulamento</a></div>
        </div>
        <div id="linha02" class="linha">Secção 2014
            <div class="mais"></div>
        </div>
        <div id="submenu02" class="submenu">
            <div id="submenu02_linha02" class="linha"><a href="<?php echo get_permalink( 79 ); ?>">Cinema Fantástico</a></div>
            <div id="submenu01_linha04" class="linha"><a href="<?php echo get_permalink( 83 ); ?>">Cinema Português</a></div>
            <div id="submenu01_linha05" class="linha"><a href="<?php echo get_permalink( 85 ); ?>">Premiere e Panorama</a></div>
        </div>
        <div id="linha03" class="linha"><a href="<?php echo get_permalink( 9 ); ?>">Notícias</a></div>
        <div id="linha06" class="linha"><a href="<?php echo get_permalink( 13 ); ?>">Premiados</a></div>
        <div id="linha07" class="linha"><a href="<?php echo get_permalink( 15 ); ?>">Newsletter</a></div>
        <div id="linha09" class="linha"><a href="<?php echo get_permalink( 19 ); ?>">Contactos</a></div>
        <div id="linha10" class="linha"><a href="https://www.essr.net/cdcomunicacao/al5580/PAA/wp-content/themes/PAA/animpaa.swf" rel="shadowbox">Animação</a></div>
    </div>
</div>

<强>的Javascript 

$(".mais").html("&#x25BA;"); // Set arrows to right.

$(".linha").on("click", function() {    
    var $linha = $(this);
    var $subMenu = $linha.next(".submenu");    
    $subMenu.slideToggle(function() { 
        // Alternate between down and right arrows.
        $(".mais", $linha).html($(this).is(":visible") ? "&#x25BC;" : "&#x25BA;");
    });    
});

Demo #2

答案 1 :(得分：0)

结构更多

HTML 

<ul id="menu">
    <li class="open">
        <a href="#">Festival</a>
        <ul>
            <li><a href="#">Homenages</a></li>
            <li><a href="#">Como Participar</a></li>
            <li><a href="#">Regulamento</a></li>
        </ul>
    </li>
    <li><a href="#">Premiados</a></li>
    <li>
        <a href="#">Festival</a>
        <ul>
            <li><a href="#">Homenages</a></li>
            <li><a href="#">Como Participar</a></li>
            <li><a href="#">Regulamento</a></li>
        </ul>
    </li>
</ul>

JS 

$('#menu > li').each(function(){
    if( $(this).find('ul').length>0 ){
        $(this).addClass('dropable')
        $($(this).find('a')[0]).click(function(){
            $(this).parent().toggleClass("open");
            $($(this).parent().find('ul')[0]).slideToggle();
        });
        if( $(this).hasClass('open') ){
            $($(this).parent().find('ul')[0]).slideToggle();
        }
    }
});

CSS 

#menu > li > ul > li{
    list-style: none;
}
#menu > li > ul{
    display: none;
}
#menu > li{
    list-style: none;
}
#menu > li{
    padding-left: 12px;
}
#menu > li.dropable{
    padding-left: 0px;
}
#menu > li.dropable:before{
    content: '►';
    font-size: 12px;
}
#menu > li.dropable.open:before{
    content: '▼';
    font-size: 12px;
}

演示：http://jsfiddle.net/b993q/

相关问题
最新问题