Question

我的代码如下所示：

if ($(window).width() > 500) {
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
        $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "block");

    }, function() {
        $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "none");

    });
}else if ($(window).width() <= 500) {
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
        $("#about-us .q-team .q-team-layout .q-xzz").css("display", "block");

    }, function() {
        $("#about-us .q-team .q-team-layout .q-xzz").css("display", "none");

    });
}

我的Html代码如下所示：

<div class="q-team-layout">
                <div class="q-jyoti-layout">
                    <img class="q-team-images" src="../test/images/jyoti.png" alt="Los Angeles">
                    <div class="q-name">Jyotirmoy</div>
                    <div class="q-desig">CEO</div>
                    <div class="x1">
                        <span style="color:#ff363f;font-weight:bold;"> Jyoti </span>
                        <span style="color:#4d4d4d;"> CEO </span>
                    </div>
                    <div class="q-jyoti-info">Lives in Gurgaon. <br/>Has spent 6 years in various multinational companies executing and ideating for new age projects.</div>
                </div>
                <div class="q-xzz">Lives in Gurgaon. <br/>Has spent 6 years in various multinational companies executing and ideating for new age projects.</div>
</div>

所以基本上我想要的是500px以上 .q-xzz 不应该存在且低于500px .q-jyoti-info 不应该存在。但不知何故，这种情况对移动和网络都不起作用。这个条件陈述中是否有任何遗漏？

Answer 1

将条件置于hover()内以简化

$("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
   var childSelector = $(window).width() > 500 ? '.q-jyoti-info' : '.q-xzz';
   $(this).find(childSelector).toggle();//does same as hide/show
});

请注意，当您在hover()中仅提供一个函数参数时，将为两个事件调用

Answer 2

首先将它放在你的css文件中，所以当在浏览器中解析html和css时，元素的默认值将被隐藏

＃about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info {
显示：无
}

然后在css中添加class

.show {
显示：块
}

之后你可以使用jQuery Methods＆＃39; addClass（）＆＃39;和＆＃39; removeClass（）＆＃39;

if ($(window).width() > 500) {    
            $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
                $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").addClass('show');

            }, function() {
                $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").removeClass('show');

            });
    }

     else {
            $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
                $("#about-us .q-team .q-team-layout .q-xzz").addClass('show');

            }, function() {
                $("#about-us .q-team .q-team-layout .q-xzz").removeClass('show');

            });
        }

Answer 3

如果你指的是jQuery没有以500px的宽度触发，这是因为$(window).width()没有考虑浏览器滚动条。没有办法弥补这一点，因为不同的浏览器具有不同的滚动条宽度。但是，您可以使用matchMedia，它允许在jQuery中使用媒体查询。但是，IE9及以下版本不支持matchMedia。

if(window.matchMedia('(min-width: 500px)').matches) {
  $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
    $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").addClass('show');
  }, function() {
    $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").removeClass('show');
  });
} else {
  $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
     $("#about-us .q-team .q-team-layout .q-xzz").css("display", "block");
   }, function() {
     $("#about-us .q-team .q-team-layout .q-xzz").css("display", "none");
   });
}

$（window）.width（）无法在500px以上和500px以下的尺寸下完美地工作

3 个答案: