Question

我写了这段代码：

$(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点击方法第一次有效，但是当我点击侧面图上名为“دانلود”且类"anav" i="se"（（دانلود））的第四个菜单时，此代码无效！

我希望完美的家伙可以帮助我...... 有一些问题，因为我为另一个网站编写了类似的代码并且存在同样的问题......

Answer 1

使用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);
});

第二次单击时Jquery单击方法不起作用

1 个答案: