如何將此代碼從懸停轉換爲單擊或切換

以下是腳本可以正常工作的懸停方式，但如果任何人有任何關於如何實現此功能的想法，則需要它是切換或點擊功能。它取決於按鈕是hoverd在多數民衆贊成罰款，但在頁面上工作時，它會彈出所有的時間那種惱人的如何將此代碼從懸停轉換爲單擊或切換

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".container").hide(); 
       $(['btn1', 'btn2', 'btn3']).each(function(){ 
        var btn = this; 
        var con = $("#"+btn).children('.container'); 
         $("#"+btn).hover(
         function(){ 
          $(".hover").mouseout(); 
          $(this).addClass('hover'); 
          var cache = $(con).children('p'); 
        //check to see if content was loaded previously 
          if(cache.size()){ 
           con.show(); 
          }else{ 
            $(con).show(); 
            $(con).html('<img src="imgs/loader.gif" alt="Loading..." />'); 
            $.ajax({ 
            url: 'data/'+btn+'.php', 
            type: 'get', 
            success: function(data){ 
            $(con).html(data); 
            } 
            }); 
          } 
         }, 
        //mouseout 
          function(){ 
           if($.browser.msie){ 
           $(con).hide(); 
           }else{ 
           $(con).fadeOut(250); 
           } 
           $(this).removeClass('hover'); 
          } 
         ); 
       }); 
     }); 
    </script> 






<div id="btn1" class="wrapper"> 
    <div class="button"> 
     <p><i class="fa fa-users" aria-hidden="true"></i></p> 
    </div> 
    <div class="content"> 
    </div> 
</div> 

<div id="btn2" class="wrapper"> 
    <div class="button"> 
     <p><i class="fa fa-comments" aria-hidden="true"></i></p> 
    </div> 
    <div class="content"> 
    </div> 
</div>

來源

2017-06-20 RaydenPe

請顯示HTML。 – mjw

代碼下方的Html – RaydenPe

謝謝你們的不同PHP文件收集數據我想出如何做到這一點，也使編碼更少。所以它所做的就是創建下拉按鈕，其中btn1編號爲，下一個按鈕編號爲btn2。解析php文件名爲btn1.php你編碼你需要在按鈕的內容div中顯示數據

Aaaargh對不起，似乎只有第一個按鈕的作品顯示了conent div，點擊後關閉，但後來的新按鈕顯示內容div阿賈克斯要求都很好但不再關閉時再次點擊

<script> 
$(".wrapper").click(function() 
      { 
      var btn = $(this).attr('id'); 
      var conte = $('.content').css('display'); 
      var con = $(this).children('.content'); 
      if (conte == 'block') { 
      $(con).css('display','none'); 
      } else if (conte == 'none') { 
    $(con).css('display','block'); 
    $(con).html('<img src="imgs/loader.gif" alt="Loading..." />'); 
      $.ajax({ 
      url: 'configuration/'+btn+'.php', 
      type: 'get', 
      success: function(data){ 
      $(con).html(data); 
      } 
     }); 
} 

});     
    </script>

來源

2017-06-20 17:41:15 RaydenPe

如何將此代碼從懸停轉換爲單擊或切換

回答

相關問題