爲fadetoggle

Question

單腳本我一直在試圖建立一個滑動開關按鈕之外，當點擊隱藏所有切換。已經完成了。我的問題是我需要爲每個按鈕創建腳本來顯示和隱藏工具提示/內容。有沒有辦法在單個腳本中這樣做，以便在添加更多按鈕和內容時，我不必添加更多腳本？提前致謝。

下面是HTML：

$(document).ready(function() { 
 
    var $content = $(".tooltip1").hide(); 
 
    $(document).on("click", function(e) { 
 
    if ($(e.target).is(".button1")) { 
 
     $content.slideToggle(); 
 

 
    } else { 
 
     $content.slideUp(); 
 
    } 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    var $content = $(".tooltip2").hide(); 
 
    $(document).on("click", function(e) { 
 
    if ($(e.target).is(".button2")) { 
 
     $content.slideToggle(); 
 

 
    } else { 
 
     $content.slideUp(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="toggle1"> 
 
    <a class="button1 button" href="#">Button 1</a> 
 
    <p class="tooltip1 tooltip">Tooltip1</p> 
 
</div> 
 
<div class="toggle2"> 
 
    <a class="button2 button" href="#">Button 2</a> 
 
    <p class="tooltip2 tooltip">Tooltip2</p> 
 
</div>

Answer 1

是肯定

$(function() { 
 
    $(document).on("click",function(e) { 
 
    if (!$(e.target).hasClass("button")) { 
 
     $(".tooltip").slideUp(); 
 
    } 
 
    }); 
 
    $(".button").on("click", function(e) { 
 
    e.preventDefault(); // cancel click 
 
    $(".tooltip").slideUp(); // can test here to not yoyo 
 
    $(this).next().slideToggle(); 
 
    // or $(this).parent().find(".tooltip").slideToggle(); if not next to link 
 
    }); 
 
});

.tooltip { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="toggle1"> 
 
    <a class="button" href="#">Button 1</a> 
 
    <p class="tooltip">Tooltip1</p> 
 
</div> 
 
<div class="toggle2"> 
 
    <a class="button" href="#">Button 2</a> 
 
    <p class="tooltip">Tooltip2</p> 
 
</div>