Javascript 第二次单击中的Jquery click方法无效

我写了以下代码：

$(document).ready(function(e) {
    $('.nav').hide();

    $('.click#firstnav').click(function(e) {//zeynabiyoun
        $('.nav#firstitem')
            .fadeIn('fast')
            .animate({marginTop:58, marginLeft:672, fontSize:21},'slow', 'swing', false);
        $('.nav, .zeynab, .DL').not('.nav#firstitem').fadeOut('slow').removeAttr('style');
    });
    $('.click#secondnav').click(function(e) {//shobahaat
        $('.nav#seconditem')
            .fadeIn('fast')
            .animate({marginTop:162, marginLeft:712,fontSize:21}, 'slow', 'swing', false);
        $('.nav, .zeynab, .DL').not('.nav#seconditem').fadeOut('slow').removeAttr('style');
    });
    $('.click#thirdnav').click(function(e) {//Download
        $('.nav#thirditem')
            .fadeIn('fast')
            .animate({marginTop:175, marginLeft:825, fontSize:21}, 'slow', 'swing', false);
        $('.nav, .zeynab, .DL').not('.nav#thirditem').fadeOut('slow').removeAttr('style');
    });
    $('.click#fourthnav').click(function(e) {//Khaandanihaa
        $('.nav#fourthItem')
            .fadeIn('fast')
            .animate({marginTop:240, marginLeft:845, fontSize:21}, 'slow', 'swing', false);
        $('.nav, .zeynab, .DL').not('.nav#fourthItem').fadeOut('slow').removeAttr('style');
    });
    $('.click#fifthnav').click(function(e) {//ertebaat baa maa
        $('.nav#fifthItem')
            .fadeIn('fast')
            .animate({marginTop:251, marginLeft:897, fontSize:21}, 'slow', 'swing', false);
        $('.nav, .zeynab, .DL').not('.nav#fifthItem').fadeOut('slow').removeAttr('style');
    });
    //Sub menu Behavior
    $('.anav#yek').click(function(e) {
        $('.zeynab#yek_1')
            .fadeIn('slow')
            .animate({marginTop:135, marginLeft:755,fontSize:21}, 'slow', 'swing', false);
        $('.zeynab#yek_2')
            .fadeIn('slow')
            .animate({marginTop:183, marginLeft:808, fontSize:21}, 'slow', 'swing', false);
        $('.zeynab#yek_3')
            .fadeIn('slow')
            .animate({marginTop:242, marginLeft:842, fontSize:21}, 'slow', 'swing', false);
        $('.zeynab#yek_4')
            .fadeIn('slow')
            .animate({marginTop:235, marginLeft:912, fontSize:21}, 'slow', 'swing', false);
    });
    $('.anav#se').click(function(e) {
        $('.DL#se_1')
            .fadeIn('slow')
            .animate({marginTop:227, marginLeft:856, fontSize:21}, 'slow', 'swing', false);
        $('.DL#se_2')
            .fadeIn('slow')
            .animate({marginTop:236, marginLeft:910, fontSize:21}, 'slow', 'swing', false);
    });
});

从该HTML页面：

<div class="image" id="navigation_image"><!-- Nav Start -->
  <img id="navigation" alt="عکس برای منوی هدایت" src="../images/navigation_picture_transparency.gif" usemap="#mapNum1" />
  <!-- Map For Navigation Picture -->
  <map name="mapNum1" class="map1" id="mapNum1"> 
    <area class="click" id="firstnav" shape="circle" coords="24,30,20" href="#" alt="هیأت زینبیون" />
    <area class="click" id="secondnav" shape="circle" coords="47,100,20" href="#" alt="پاسخ به شبهات" />
    <area class="click" id="thirdnav" shape="circle" coords="112,140,17" href="#" alt="دانلود" />
    <area class="click" id="fourthnav" shape="circle" coords="112,180,16" href="#" alt="خواندنی ها" />
    <area class="click" id="fifthnav" shape="circle" coords="165,190,20" href="#" alt="ارتباط با ما" />
  </map>
  <!-- Map For Navigation Picture -->

  <div class="nav" id="firstitem">
    <a href="#" class="anav" id="yek">هیأت زینبیون</a>
  </div>
  <div class="nav" id="seconditem">
    <a href="#" class="anav" id="do">پاسخ به شبهات</a>
  </div>
  <div class="nav" id="thirditem">
    <a href="#" class="anav" id="se">دانلود</a>
  </div>
  <div class="nav" id="fourthItem">
    <a href="#" class="anav" id="chahar">خواندنی ها</a>
  </div>
  <div class="nav" id="fifthItem">
    <a href="#" class="anav" id="panj">ارتباط با ما</a>
  </div>

</div>

<!-- Nav End -->

<!-- ُSubNav Start -->
<div class="nav" id="subzeynab1"><!-- Sub Zeynab Start -->
  <a class="anav zeynab" id="yek_1" href="#">از آغاز</a>
</div>
<div class="nav" id="subzeynab2">
  <a class="anav zeynab" id="yek_2" href="#">برنامه ها</a>
</div>
<div class="nav" id="subzeynab3">
  <a class="anav zeynab" id="yek_3" href="#">گالری عکس</a>
</div>
<div class="nav" id="subzeynab4">
  <a class="anav zeynab" id="yek_4" href="#">باقیات</a>
</div>
<!-- Sub Zeynab End -->

<!-- Sub Download Start -->
<div class="nav" id="subdownload1">
  <a class="anav DL" id="se_1" href="#">مولودی</a>
</div>
<div class="nav" id="subdownload2">
  <a class="anav DL" id="se_2" href="#">مداحی</a>
</div>

jQuery click方法第一次起作用，但是当我单击侧图上名为“دانلود”的第四个菜单时，类为

“anav”I=“se”

（（دنلود）），这段代码不正确

我希望完美的男人能帮助我。。。

---

有点不对劲，因为我为另一个站点编写了类似的代码，但出现了相同的问题…

使用

On

方法，而不是单击函数，因为当包含多个单击时，它永远不会起作用，所以请根据需要更改代码

$(document).on( 'click','.anav#se', function (e) {
    $('.DL#se_1').fadeIn('slow').animate({
        marginTop: 227,
        marginLeft: 856,
        fontSize: 21
    }, 'slow', 'swing', false);
    $('.DL#se_2').fadeIn('slow').animate({
        marginTop: 236,
        marginLeft: 910,
        fontSize: 21
    }, 'slow', 'swing', false);
});

---

将选择器代码替换为

$（“#firstnav”）

，因为

不是父项，所以不需要添加
。请在简单的JSFIDLE示例中复制您的问题，要么你会发现问题，要么我们会更好地了解你的代码和你试图实现的目标。感谢你亲爱的Nanda对你的关注。。。我不知道。。。我将测试它，正如W3school.com中的描述，它比我选择的方式更好。。。当心。。。