2

我试图language_arrow_bottom在单击并显示后隐藏，然后language_arrow_up反过来。

我在下面的代码中找不到错误？我知道在 jquery 中切换，但我现在不想使用它。

提前致谢

我正在加载http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

HTML

<a id="language_arrow_bottom" href="#nogo" title="Other languages‎"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close‎"  style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

JS

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});
4

7 回答 7

4

您需要language_arrow_up默认隐藏元素，而不是其中的图像

<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

演示：小提琴

于 2013-09-11T12:11:42.747 回答
0

这是因为您在加载时隐藏了图像...您应该在 'a' 标签中使用 display none 而不是在 'img'

于 2013-09-11T12:14:38.063 回答
0

我不知道，但我认为您可能需要return false;在函数末尾添加调用。其他代码看起来不错

于 2013-09-11T12:15:16.373 回答
0

检查这个小提琴

只需使用 id 并执行与标签相同的程序

<div id="language_arrow_bottom">
    <a href="#nogo" title="Other languages"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
</div>

<div id="language_arrow_up" style="display:none;">
    <a  href="#nogo" title="Close"><img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/></a>
</div>
于 2013-09-11T12:18:35.723 回答
0

同意上面的阿伦。此外，此代码可能正在运行，但您使用的是相同的图像“web/images/bottom_arrow.jpg”，因此在视觉上它可能看起来不起作用。尝试在标签中使用单独的内容（或查看网络检查器）来验证代码是否正常工作。

于 2013-09-11T12:20:23.067 回答
0

另一个小提琴：

http://jsfiddle.net/8A8LS/1/

<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>

<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>

$('a').click(function () {
  $('a img').show();
  $(this).find('img').hide();
});
于 2013-09-11T12:20:29.897 回答
0

更改代码以将“a”而不是 img 设置为显示“None”，因为图像位于 a 标签内，并且您根据“a”id 显示和隐藏。

<a id="language_arrow_bottom" href="#nogo" title="Other languages">
  <img src="web/images/bottom_arrow.jpg"  width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
  <img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />

上述更改后，相同的 js 代码将在这里工作。

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});
于 2013-09-11T12:27:34.813 回答