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

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

代码中有几个错误。

1. 不透明度 的测量范围是0 到1，没有百分比。
2. .active_img 中的opacity 不会否决默认的opacity，因为第一条规则有更多的选择器，这使得它更重要。

3. #menu_container 中的 td 没有定位，这使得图像定位是绝对的，但相对于窗口而不是 td.

4. #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>

header 下降的初始行为是由于未定义初始 top 值这一事实引起的。但我不知道这是否应该发生，所以我就这样吧。

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