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

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

  •  
  •   moonshow · 34 天前 · 354 次点击
    这是一个创建于 34 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在通过 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
        1
    moonshow   34 天前
    有做跨境电商,外贸独立站的朋友可以交流下哈
        2
    zbinlin   34 天前
    在后面加上 `$(".productnav_open:first").click();`
        3
    moonshow   33 天前
    @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();
        4
    zbinlin   33 天前   ♥ 1
    抱歉,写错了,应该是 $(".productnav_list_dt:first").click()
        5
    moonshow   33 天前
    @zbinlin 可以了感谢!兄弟
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   994 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 18:34 · PVG 02:34 · LAX 11:34 · JFK 14:34
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1