JQuery показать и скрыть по той же ссылке нажмите

Question

У меня есть div, и я хочу показать и скрыть ссылку. Не две разные ссылки, чтобы показать и скрыть, а только одна. Я использовал toggle (), но он не работает для меня ..

Вот код

<a id="showhidediv">show-hide</a>
<div id="maindiv">
 <div id="innerleftdiv" style="width:49%;float:left">
 </div>
 <div id="innerrightdiv" style="width:49%;float:left">
 </div>
<div>

<script text="text/javascript">
  $().ready(function){
    $("showhidediv").click(function(){
      $("maindiv").hide()
    });
</script>

Спасибо

Answer 1

Следующие работы. Если вы не можете заставить это работать для вашего конкретного проекта, проблема в другом месте, а не в методе переключения или синтаксисе jQuery:

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").toggle();
  });
});

Исходя из ваших комментариев, вы можете использовать $ .slideToggle () вместо этого:

$(function(){
  $("a#showhidediv").click(function(){
    $("#maindiv").slideToggle();
  });  
});

С двумя плавающими элементами вы можете немного изменить свою разметку:

<div id="maindiv">
  <div style="width:49%;float:left;">Foo</div>
  <div style="width:49%;float:left;">Bar</div>
  <div style="clear:both"></div>
</div>

Все это работает, как и ожидалось, как показано в этой онлайн-демонстрации: http://jsbin.com/anaxi/edit и использует slideToggle в этой демонстрации: http://jsbin.com/anaxi/2/edit

Answer 2

Это должно работать ( с переключателем )

$('#showhidediv').click( function() { $('#maindiv').toggle();return false; } );

Answer 3

Я выполняю это, изменяя текст ссылки в зависимости от видимости div, который вы хотите переключать.

if ($("#divToToggle").is(":visible"))
   $("#linkId")[0].innerText = "show";
else
   $("#linkId")[0].innerText = "hide";

$("#divToToggle").toggle();

Если по какой-то причине у вас не работает тумблер, просто используйте show () и hide () в divToToggle

Answer 4

Спасибо всем за попытку ответить на вопрос, и каждый был прав ..

Я нашел решение. Ниже приведена функция jquery

$("#showhide").click(function() { 
  if ( $("#maindiv").is(":visible") ) { 
    $("#maindiv").hide(); 
  } else if ( $("#maindiv").is(":hidden") ) { 
    $("#maindiv").show(); 
  }
});

Answer 5

Обычно работает следующее.

$('#showhidediv').click(function(e) {
    $('#maindiv').toggle();
    e.preventDefault(); // Stop navigation
});

То, что он делает, вызывает toggle () на div, который вы хотите показать / скрыть. Если у вас есть несколько из этих ссылок, и переключатель переключателя всегда следует по ссылке, вы можете сделать что-то вроде этого:

$('.showhide').click(function(e) {
    $(this).next().toggle();
    e.preventDefault(); // Stop navigation
});

И HTML-код будет выглядеть так:

<a class="showhide">Foo</a>
<div>show me / hide me</div>

<a class="showhide">Bar</a>
<div>show me / hide me</div>

Надеюсь, это поможет.

Answer 6

Javascript код:

$(".user-profile-info").unbind().click(function(){

    if($( ".user-profile-info" ).hasClass("collapsed")){

         $('#user-profile-submenu').css('display', 'block');
         $( ".user-profile-info" ).removeClass("collapsed");
    }

    else
    {       
         $( ".user-profile-info" ).addClass("collapsed");
         $('#user-profile-submenu').css('display', 'none');
    }
});

HTML код:

<div class="user-profile-info collapsed"></div>
<div id="user-profile-submenu">Content of click</div>

Answer 7

Вы можете попробовать это

<a href="javascript:toggleDiv('maindiv');">show-hide</a>
     <div id="maindiv">
          #....content goes here.....
     <div>

 <script text="text/javascript">
   function toggleDiv(divId) {
      $("#"+divId).toggle();
   }
 </script>

работает для меня, также проверьте эту ссылку

Answer 8

Все вышеперечисленные решения должны работать. Я не могу себе представить, что это было бы что-то в CSS, что помешало бы этому работать.

Какую версию jQuery вы используете?

Answer 9

вы пробовали:

$('#showhidediv').click(function(){
  $('#maindiv').toggle();
  return false; // should return false to prevent page loading
})