Question

这应该改变显示的图像（2个图像在彼此的顶部）。我正在使用不透明度为100的活动类，并且应该超过非活动类（z-index）。非活动图像的不透明度为0.当单击图像时，另一个图像应获得100不透明度和更高的z-index。（动画并不重要）。

第一个奇怪的事情：在新页面上，即使它没有活动类，也会显示向下箭头
第二个奇怪的事情：当我点击图像时，没有任何反应。

HTML：

<div id="menu_container">
<table>
<tr>
<td>
<h1>Menü megnyitása</h1>
</td>
<td>
<img src="arrow_up.gif" alt="arrow" class="arrow_up active_img"/> 
<img src="arrow_down.gif" alt="arrow" class="arrow_down"/>
</td>
</tr>
</table>
</div>

正常和活动图像的CSS：

#menu_container table tr td img {
    width:50px;
    height:50px;
    opacity:0%;
    cursor:pointer;
    display:block;
    position:absolute;
    bottom:0px;
    position:absolute;
    z-index:1;
}
.active_img {
    width:50px;
    height:50px;
    cursor:pointer;
    opacity:100;
    position:absolute;
    z-index:2;
    }

最后是脚本本身：

var menu = function() {
    $('.arrow_up').click(function() {
        $('#header').animate({top: '10%'}, 300);
        $('#menu_container').animate({top: '15%'},300);

        var active = $('.active_img');

        active.removeClass('active_img');
        active.next().addClass('active_img');

        $('#menu_list').show();
    });
    $('.arrow_down').click(function() {
        $('#header').animate({top: '50%'}, 300);
        $('#menu_container').animate({top: '55%'},300);

        var active = $('.active_img');

        active.removeClass('active_img');
        active.prev().addClass('active_img');

        $('#menu_list').hide();
    });
};
$(document).ready(menu);

Answer 1

代码中有几个错误。

opacity的衡量标准为0至1，不含百分比。
opacity .active_img不会否决默认opacity，因为第一条规则中有更多选择器，这使得它更重要。
td中的#menu_container未定位，这使得图片位于绝对位置但相对于窗口而非td。
#menu_container未定位，这使其在您设置top动画时保持不动。

var menu = function() {
    $('.arrow_up').click(function() {
        $('#header').animate({top: '10%'}, 300);
        $('#menu_container').animate({top: '15%'},300);

        var active = $('.active_img');

        active.removeClass('active_img');
        active.next().addClass('active_img');

        $('#menu_list').show();
    });
    $('.arrow_down').click(function() {
        $('#header').animate({top: '50%'}, 300);
        $('#menu_container').animate({top: '55%'},300);

        var active = $('.active_img');

        active.removeClass('active_img');
        active.prev().addClass('active_img');

        $('#menu_list').hide();
    });
};
$(document).ready(menu);

#menu_container {
  position:absolute;
}

#menu_container table tr td {
  position:relative;
}

#menu_container table tr td img {
  width:50px;
  height:50px;
  opacity:0;
  cursor:pointer;
  display:block;
  position:absolute;
  bottom:0px;
  z-index:1;
}

#menu_container table tr td .active_img {
  opacity:1;
  z-index:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="menu_container">
  <table>
    <tr>
      <td>
	<h1>Menü megnyitása</h1>
      </td>
      <td>
	<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" alt="arrow" class="arrow_up active_img"/> 
	<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" alt="arrow" class="arrow_down"/>
      </td>
    </tr>
  </table>
</div>

标头失败的初始行为是由于未定义初始top值引起的。但我不知道是否应该发生这种情况，所以我会这样离开。

这并不能解决任何设计问题，但这不是我的任务。

Answer 2

可以更轻松地完成。

<div id="toggler">
<img src="image1.jpeg"/>
<img src="image2.jpeg" style="display:none"/>
</div>

<script>
$("#toggler").click(function() {
    $(this).find('img').toggle();
});
</script>

Answer 3

要使代码正常工作，您只需删除#menu_container表格中的z-index：1，然后删除它。

#menu_container table tr td img {
width:50px;
height:50px;
opacity:0%;
cursor:pointer;
display:block;
position:absolute;
bottom:0px;
position:absolute;

}

我不明白为什么这段代码不起作用

3 个答案: