Javascript - 要素をクリック可能にして他のボタンをオフにする

Question

プラス/マイナス記号をクリック可能にするにはどうすればよいですか？それは今ではない... 2番目のボタンをクリックしたときに開いていると、他のボタンをオフ（ドロップダウン）にするにはどうすればよいですか？ここで

JAVASCRIPT

$(".dropbtn").append('<span class="adl-signs">&nbsp;+</span>'); 

function ctaDropMenu(e) { 
    e.target.nextElementSibling.classList.toggle("show"); 
} 

function toggleSigns(e) { 
    $(e.target).find('.adl-signs').html(function(_, html) { 
    return $.trim(html) == '&nbsp;+' ? '&nbsp;-' : '&nbsp;+'; 
    }); 
} 

$(".dropbtn").click(function(e) { 
    ctaDropMenu(e) 
    toggleSigns(e) 
}); 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

FIDDLE = https://jsfiddle.net/neuhaus3000/jf1zetLw/8/

Answer 1

が更新fiddleです。私は可能な限りコードを単純化しようとし、どこでも可能な限りjQueryを使用しました。

function changeText(text) { 
    return (text.indexOf('+') >= 0) ? 'Click Me -' : 'Click Me +'; 
} 

$(".dropbtn").click(function() { 

    var $this = $(this), 
    $dropdownActive = $('.dropdown-active'); 

    /* changing the text of the active button (if any) */ 
    $dropdownActive.text(changeText($dropdownActive.text())); 

    /* hiding the content under the active button (if any) */ 
    $('.dropdown-content', $dropdownActive.parent()).toggle('show'); 

    if (!$this.hasClass('dropdown-active')) { 

    /* changing the text of the clicked button */ 
    $this.text(changeText($this.text())); 

    /* showing the content under the clicked button */ 
    $('.dropdown-content', $this.parent()).toggle('show'); 

    /* adding this class to the clicked button */ 
    $this.addClass('dropdown-active'); 
    } 

    /* removing this class from the active button */ 
    $dropdownActive.removeClass('dropdown-active'); 
}); 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var $dropdownActive = $('.dropdown-active'); 

    /* changing the text of the active button (if any) */ 
    $dropdownActive.text(changeText($dropdownActive.text())); 

    /* hiding the content under the active button (if any) */ 
    $('.dropdown-content', $dropdownActive.parent()).toggle('show'); 

    /* removing this class from the active button */ 
    $dropdownActive.removeClass('dropdown-active'); 
    } 
} 

問題がある場合は教えてください。ありがとう。