西西木科技丨Shopify开发机构 2023-01-31 18:47 采纳率: 96.4%
浏览 22
已结题

使用js和jq无法切换display效果

使用js和jq无法切换display效果,但是用alert有获取到div的display


<li>
<botton class="social-custom" style="cursor:pointer;" onclick="openwechat()">
   <img src="//cdn.shopify.com/s/files/1/0520/6396/1266/files/wechat.png?v=1675139232">
</botton>
</li>

<div id="wechatdiv" style="display:none;">
<botton style="cursor:pointer;" onclick="closewechat()"><img src="https://img.icons8.com/material-outlined/15/null/delete-sign.png"></botton>
<img src="//cdn.shopify.com/shopifycloud/shopify/assets/no-image-100-c91dd4bdb56513f2cbf4fc15436ca35e9d4ecd014546c8d421b1aece861dfecf_small.gif"></div>

<script>
 
      function openwechat(){
        var showWechat = document.getElementById("wechatdiv").style.display;
        if (showWechat = "none") {
                document.getElementById("wechatdiv").style.display = "block";
        } else {
                document.getElementById("wechatdiv").style.display = "none";
        }
    }

      function closewechat(){
        var showWechat = document.getElementById("wechatdiv").style.display;
        if (showWechat = "block") {
                document.getElementById("wechatdiv").style.display = "none";
        }
    }
  
</script>
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2023-01-31 20:29
    关注

    页面上出现了2个id为wechatdiv的容器,首先出现的是页头移动端的,然后才是页脚的wechatdiv,而document.getElementById("wechatdiv")只会得到第一个出现(就是页头的wechatdiv),而页头的wechatdiv的容器只有在移动端并且展开菜单后才会显示。所以pc端点击页脚的openwechat实际控制的移动端的openwechat,导致页脚的wechatdiv无法显示。

    改为属性选择,函数改成下面即可

    
        function openwechat() {
            var els = document.querySelectorAll('div[id="wechatdiv"]');//改为属性选择器
            for (var el of els) el.style.display = el.style.display == 'block' ? 'none' : 'block';
        }
    
        function closewechat() {
            //因为是关闭,不需要再判断了
            var els = document.querySelectorAll('div[id="wechatdiv"]');//改为属性选择器
            for (var el of els) el.style.display = 'none' ;
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月8日
  • 已采纳回答 1月31日
  • 创建了问题 1月31日

悬赏问题

  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 unity第一人称射击小游戏,有demo,在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差(基于双目相机)