V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
moonshow
V2EX  ›  前端开发

如何让 js 折叠菜单默认展开状态

  •  
  •   moonshow · 2019-03-17 22:57:04 +08:00 · 2823 次点击
    这是一个创建于 2076 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在通过 shopify 建独立站,涉及到修复模板,本人只会简单的 html+css,不懂 js,在网上找了一段折叠菜单的代码,现在想让第一个菜单默认展开状态,应该如何实现呢?求大佬赐教!谢谢!

    Ae7fcd.png

    对应的 html 代码

    <div class="mobile_tabs">
    <dl class="productnav_list_dl">
      	<dt class="productnav_list_dt">
            <p>description</p>
            <i class="productnav_list_dt_icon"></i>
        </dt>
        <dd class="productnav_list_dd">
              <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
              </div>
        </dd>
        <dt class="productnav_list_dt">
            <p>Shipping & Returns</p>
            <i class="productnav_list_dt_icon"></i>
        </dt>
        <dd class="productnav_list_dd">
            <p>{{ pages.shipping-returns.content }}</p>
        </dd>
        <dt class="productnav_list_dt">
            <p>Review (<span class="ryviu-show-number"></span>)</p>
            <i class="productnav_list_dt_icon"></i>
        </dt>
        <dd class="productnav_list_dd">
            <div class="ryviu-show-reviews" product-handle="{{product.handle}}">{{product.metafields.ryviu.reviews}}</div>
        </dd>
    </dl>
    </div>
    
    下面对应的 js 代码
    ------------------------------------------------------------------------------
    	        $(".productnav_list_dt").on("click",function () {
            $('.productnav_list_dd').stop();
            $(this).siblings("dt").removeAttr("id");
            if($(this).attr("id")=="productnav_open"){
                $(this).removeAttr("id").siblings("dd").slideUp();
            }else{
                $(this).attr("id","productnav_open").next().slideDown().siblings("dd").slideUp();
            }
        });
    
    5 条回复    2019-03-18 10:57:16 +08:00
    moonshow
        1
    moonshow  
    OP
       2019-03-17 23:01:45 +08:00
    有做跨境电商,外贸独立站的朋友可以交流下哈
    zbinlin
        2
    zbinlin  
       2019-03-17 23:12:49 +08:00
    在后面加上 `$(".productnav_open:first").click();`
    moonshow
        3
    moonshow  
    OP
       2019-03-18 08:04:19 +08:00
    @zbinlin
    感谢回复,加了没效果,是不是我代码放的位置不对?
    $(".productnav_list_dt").on("click",function () {
    $('.productnav_list_dd').stop();
    $(this).siblings("dt").removeAttr("id");

    if($(this).attr("id")=="productnav_open"){
    $(this).removeAttr("id").siblings("dd").slideUp();
    }else{
    $(this).attr("id","productnav_open").next().slideDown().siblings("dd").slideUp();
    }
    });
    $(".productnav_open:first").click();
    zbinlin
        4
    zbinlin  
       2019-03-18 09:27:08 +08:00   ❤️ 1
    抱歉,写错了,应该是 $(".productnav_list_dt:first").click()
    moonshow
        5
    moonshow  
    OP
       2019-03-18 10:57:16 +08:00
    @zbinlin 可以了感谢!兄弟
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2870 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 11:17 · PVG 19:17 · LAX 03:17 · JFK 06:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.