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

2019-03-17 22:57:04 +08:00
 moonshow

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

对应的 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();
        }
    });
2845 次点击
所在节点    前端开发
5 条回复
moonshow
2019-03-17 23:01:45 +08:00
有做跨境电商,外贸独立站的朋友可以交流下哈
zbinlin
2019-03-17 23:12:49 +08:00
在后面加上 `$(".productnav_open:first").click();`
moonshow
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
2019-03-18 09:27:08 +08:00
抱歉,写错了,应该是 $(".productnav_list_dt:first").click()
moonshow
2019-03-18 10:57:16 +08:00
@zbinlin 可以了感谢!兄弟

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/545578

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX