Question

我是一个JS初学者，我为下拉菜单制作了一个JS代码，它工作得非常好，但由于wordpress配置，我需要更改我的代码。现在它不是ID的属性而是Class，名称仍然相同，但我只想将ID更改为类。

这是我的小JS代码：

var linkId = "dropdown-" + $(this).attr("id");
                if ($('.dropdown-sub').is(':animated')){
                    //do nothing
                } else {
                    $('.dropdown-sub').each(function() {
                        if ($(this).attr("id") !== linkId) {
                            if($(this).hasClass('open-dd')) {

                                $(this).slideUp();
                            }
                            $(this).removeClass('open-dd');
                        } else {
                            if($('#' + linkId).hasClass('open-dd')) {

                                $('#' + linkId).slideUp();
                                $('#' + linkId).removeClass('open-dd');
                            }
                            else {
                                $('#' + linkId).slideDown();
                                $('#' + linkId).addClass('open-dd');
                            }
                        }
                    }); 
                }
            });
        });

HTML：

<nav id="menu-link" class="menu-link cacher-menu">
            <ul class="optionel">
                <li  class="first primary-nav first">
                    <a><span class="menu-text">Un groupe individuel en évolution</span></a>
                    <span class="font-awesome f1"></span>
            <div class="dropdown-sub dropdown-first">
                <div class="dd-e">
                    <ul>
                        <li>
                            <a href="#">200 ans d'histoire</a>
                        </li>
                        <li>
                            <a href="#">Une multitude d'activités</a>
                        </li>
                        <li>
                            <a href="#">Une mosaïque de sociétés</a>
                        </li>
                        <li>
                            <a href="#">Une présence internationale</a>
                        </li>
                        <li>
                            <a href="#" class="last">Des femmes et des hommes</a>
                        </li>
                    </ul>
        </div>

如果你想了解更多关于这个问题的信息，请直接问我。谢谢。安德鲁伯纳德

Answer 1

根据您的代码，

只有列表li已将ID first更改为类first。

所以在这种情况下，

 <li  class="first primary-nav first">


var linkId = "dropdown-" + $(this).attr("class").split(" ").pop();

这将返回first课程。但它基于first总是在最后的假设。

如果它将在那时开始，

var linkId = "dropdown-" + $(this).attr("class").split(" ").shift();

shift会在一开始就给你上课。

现在在你的

里面

 $('.dropdown-sub').each(function() {
                        if ($(this).attr("id") !== linkId) {

检查班级dropdown-first是否可用：

if (!$(this).hasClass(linkId)) {

这将检查dropdown-first是否可用。

所以你的整个代码都会来：

$(function () {
$("nav li").click(function () {
    var linkId = "dropdown-" + $(this).attr("class").split(" ").pop();
    if ($('.dropdown-sub').is(':animated')) {
        //do nothing
    } else {
        $('.dropdown-sub').each(function () {
            if (!$(this).hasClass(linkId)) {
                if ($(this).hasClass('open-dd')) {

                    $(this).slideUp();
                }
                                              $(this).removeClass('open-dd');

            } else {
                if ($('.' + linkId).hasClass('open-dd')) {

                    $('.' + linkId).slideUp();
                    $('.' + linkId).removeClass('open-dd');
                } else {
                    $('.' + linkId).slideDown();
                    $('.' + linkId).addClass('open-dd');
                }
            }
            });
        }
    });
});

<强> DEMO

Answer 2

jQuery中的id选择器看起来像这样（你已经知道了）：

$("#my_id_name")

jQuery中的类选择器如下所示：

$(".my_class_name")

所以你只需要在.而不是#前加上选择类。只需在代码中更改此内容即可。

将ID属性更改为Class

2 个答案: