Изменение текста назад при двойном щелчке или не сфокусированном состоянии?

Question

У меня есть раскрывающийся список с надписью «View Capacityaccess», который меняет ярлык на «Hide Capacities» при нажатии. Я пытаюсь заставить его вернуться к исходной метке, когда ее дважды щелкнул (когда переключатель закрывается) или когда пользователь щелкает в другом месте окна.

HTML:

//JQUERY: 
 

 
$('.FullLengthDropdown').focus(function(){ 
 
    $('.ViewCapacitiesTxt').text("HIDE CAPACITIES"); 
 
});

<button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
    <div> 
 
    <span class="ViewCapacitiesTxt">VIEW CAPACITIES</span> 
 
    </div> 
 
</button> 
 

 
<table class="dropdown-menu"> 
 
    <tr> 
 
    <th>SPACE</th> 
 
    <th>RECEPTION</th> 
 
    <th>THEATRE</th> 
 
    <th>BANQUETING</th> 
 
    <th>CABARET</th> 
 
    <th>BOARDROOM</th> 
 
    </tr> 
 
</table>

Answer 1

просто добавить фокус из ?!

$('.FullLengthDropdown').focusout(function(){ 
    $('.ViewCapacitiesTxt').text("VIEW CAPACITIES"); 
}); 

Answer 2

Использование focusout, dblclick и toggle() для достижения этой цели.

//JQUERY: 
 

 
$('.FullLengthDropdown').on('focusout dblclick', function(){ 
 
    $('.ViewCapacitiesTxt span').toggle() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
    <div> 
 
    <span class="ViewCapacitiesTxt"> 
 
     <span>VIEW CAPACITIES</span> 
 
     <span style="display:none">HIDE CAPACITIES</span> 
 
    </span> 
 
    </div> 
 
</button> 
 

 
<table class="dropdown-menu"> 
 
    <tr> 
 
    <th>SPACE</th> 
 
    <th>RECEPTION</th> 
 
    <th>THEATRE</th> 
 
    <th>BANQUETING</th> 
 
    <th>CABARET</th> 
 
    <th>BOARDROOM</th> 
 
    </tr> 
 
</table>

Answer 3

Пожалуйста, проверьте ниже источника. Если вы заметили, когда вы нажимаете на текст ниже кнопки будет переключение обратно к исходному тексту

function toggleText() { 
 
       var toggleText = $('.ViewCapacitiesTxt').attr("data-toggle-text"); 
 
       $('.ViewCapacitiesTxt').attr("data-toggle-text", $('.ViewCapacitiesTxt').text()); 
 
       $('.ViewCapacitiesTxt').text(toggleText); 
 
      } 
 
      $('.FullLengthDropdown').click(function() { 
 
       toggleText(); 
 
      }); 
 
      $(document).ready(function() { 
 
       $(document).click(function (e) { 
 
        if (!$(e.target).hasClass("FullLengthDropdown")) { 
 
         if ($('.ViewCapacitiesTxt').text() != $('.ViewCapacitiesTxt').attr("data-orginal-text")) { 
 
          toggleText(); 
 
         } 
 
        } 
 
       }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
      <div> 
 
       <span data-toggle-text="HIDE CAPACITIES" 
 
         data-orginal-text="VIEW CAPACITIES" 
 
         class="ViewCapacitiesTxt">VIEW CAPACITIES</span> 
 
      </div> 
 
     </button> 
 

 
     <table class="dropdown-menu"> 
 
      <tr> 
 
       <th>SPACE</th> 
 
       <th>RECEPTION</th> 
 
       <th>THEATRE</th> 
 
       <th>BANQUETING</th> 
 
       <th>CABARET</th> 
 
       <th>BOARDROOM</th> 
 
      </tr> 
 
     </table>