Question

我正在创建一个下拉菜单。单击父元素时，我想更改div的文本。

 <div id="nav">
        <ul>
            <li><a href="superlative.php?page=home"id="home">home</a></li>
            <li>
                 <a href="#">about<div id="cont"></div></a>
                    <ul>
                        <li><a href="about.php" id="about">my story</a></li>
                        <li><a href="thefarmers.php" id="about">the farmers</a></li>
                        <li><a href="brunes.php" id="about">BRUNEUS</a></li>
                        <li><a href="about.php" id="about">Health Benefits</a></li>
                    </ul>
            </li>
            <li><a href="nut_cluster.php?page=products" id="products">products</a></li>`

和脚本是

$(function(){

$("#nav ul li:has(ul)").click(function()
    {
        $(this).children('ul').slideToggle();
        if($(this).children('ul').is(':hidden'))
        {
            $(this).find('#cont').text("+");
        }
        else
        {
            $(this).find('#cont').text("-");
        }
    });
});

问题在于检测到切换状态。为什么总是＆＃34; - ＆＃34;点击li时。我如何修复它来显示#cont的文本，当它的ul不可见时为+，以及 - 当它的ul可见时。

提前致谢

Answer 1

我之前也遇到过类似的问题。

我不知道在调用slideToggle()之后，元素隐藏状态检查总是返回false这一事实背后的确切原因。

因此，解决方法是在调用slideToggle()之前检查状态。

$(function(){

    $("#nav ul li:has(ul)").click(function()
        {
            var toggleState= $(this).children('ul').is(':hidden');
            $(this).children('ul').slideToggle();
            if(!toggleState)
            {
                $(this).find('#cont').text("+");
            }
            else
            {
                $(this).find('#cont').text("-");
            }
        });
    });

这是工作JsFiddle。

Answer 2

看看这个解决方案，如果您有许多开放式关闭<ul>'s，可以让您更轻松，并且更容易为您的正负号设置样式：

CSS：

#nav ul li a {
    display:inline-block;
    vertical-align:top;
}

#nav ul li a.parent:after { /*this will append one pseudo-after to your a.parent*/
    content:attr(open-closed); /*this will take the attribute open-closed="" as content*/
    display:block;
    padding:3px;
    border:1px solid #000;
    font-size:20px;
    line-height:10px;
    text-align:center;
    position:relative;
    background:#FFF;
    display:inline-block;
    vertical-align:top;
    margin-left:5px;
}

jQuery的：

$('#nav ul li:has(ul) > a').addClass('parent').on('click',function(e){ //it will add a class parent to each a that has siblings ul
    e.preventDefault(); // it will disable a.parent href on click
    $(this).siblings('ul').slideToggle('',function(){
        checkOpenClosed(); // it will execute the checkOpenClosed function after slideToggle finish
    });
});

function checkOpenClosed() {
    $('a.parent').each(function(){
        if($(this).siblings('ul').is(':visible')){
            $(this).attr('open-closed','−'); // if the siblings ul is visible the value is '-'
        } else {
            $(this).attr('open-closed','+'); // else, the value is '+'
        }
    });
}
checkOpenClosed();

演示：

http://jsfiddle.net/qMXNZ/

Answer 3

我认为它是由选择器$(this).children('ul').is(':hidden')引起的，尝试以这种方式检查可见性$(this).children('ul').css('display') == 'none'

Answer 4

因为锚标签默认为css＆＃34; 文字装饰：下划线; ＆＃34;。

你必须设置css

a{
    text-decoration: none;    
}

<强> FIDDLE

更改div内的文本取决于jquery toggleState

4 个答案: