1

私はJavascriptにかなり慣れていないので、厄介な問題に遭遇しました。

リストを含むリストがあります。クリック時にリストを表示/非表示に設定するスクリプトがあります。ただし、一度押すと、リンクにクラスを切り替えたり追加したりしたくありません。

私のリストは次のようになります

<ul>
    <li><a href="#" onclick="toggle('item1');">Click something</a>
    <ul id="item1" style="display: none;">
        <li>Something ...</li>
        <li>Something something</li>
    </ul></li>
    <li><a href="#" onclick="toggle('item2');">Click something else</a>
    <ul id="item2" style="display: none;">
        <li>Something more...</li>
        <li>Something something less?</li>
    </ul></li>
</ul>

私のスクリプトは次のようになります。

<script type="text/javascript">
    function toggle(id) {
        var v = document.getElementById(id);

        if (v.style.display == '') {
            v.style.display = 'none';
            v.removeClass("selected");
        } else {
            v.style.display = '';
            v.addClass("selected");
        }
    }
</script>

リストは想定どおりに表示および非表示になりますが、クラスは追加も削除もされません。

CSSは次のようなものです：

a:link {
    color: #000000;
    text-decoration: none;
}

a:hover, a.selected {
    color: #005b97;
    text-decoration: none;
    padding-left: 2px;
}

前もって感謝します

よろしくベンジャミン

4

5 に答える 5

5

jsには組み込みの追加および削除クラスがありません

これを試して

クラスを追加するには

document.getElementById("MyElement").className += " MyClass";

クラスを削除するには

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/ , '' )

また、要素にクラスがあるかどうかを確認する必要がある場合

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
于 2012-08-10T11:00:03.143 に答える
3

バニラJavaScriptにはaddClass/removeClassはありません。

HTML5 classList APIを使用するか、を直接操作する必要がありますv.className。

于 2012-08-10T10:58:24.523 に答える
1 
document.getElementById("idElement").setAttribute("class", "className");
于 2012-08-10T11:01:35.247 に答える
1

より少ないコードでそれをやろうとしました。うまくいけば、それはあなたがそれをするのに必要なことをします。

HTML：

<ul>
<li><a class="aSwitch" href="#" >Click something</a>
<ul id="item1" style="display:none">
    <li>Something ...</li>
    <li>Something something</li>
</ul></li>
<li><a class="aSwitch" href="#" >Click something else</a>
<ul id="item2" style="display:none">
    <li>Something more...</li>
    <li>Something something less?</li>
</ul></li>

CSS ：

a:link {
color: #000000;
text-decoration: underline;
}

a.selected {
color: #005b97;
text-decoration: none;
padding-left: 2px;
}

jQuery 

$('a.aSwitch').click(function() {
$(this).next().toggle();
$(this).toggleClass('selected');
});

ここで動作するのを見てください：FIDDLE

于 2012-08-10T11:49:40.780 に答える
0

最も簡単にuはjqueryアドオンを追加できます

<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

コードをに変更するより

<script type="text/javascript">
function toggle(id) {
    var v = document.getElementById(id);
    $('#' + id).toggleClass("selected");
    if (v.style.display == '') {
        v.style.display = 'none';
    } else {
        v.style.display = '';
    }
}
</script>
于 2012-08-10T11:04:49.373 に答える