HTML нажмите, чтобы просмотреть и скрыть бюллетень

Я столкнулся с проблемой, которая меня сильно озадачивает. Я пишу веб-инструмент и на веб-странице, у меня есть бюллетень, который при нажатии будет отображать или скрывать последние обновления, т. Е. Строку «Нажмите, чтобы просмотреть/скрыть бюллетень» в приведенном ниже коде. Это работало, но после нескольких версий теперь он не отображает обновления при нажатии. На параллельной веб-странице соответствующая часть может отображать/скрывать обновления без проблем. Я даже скопировал соответствующую часть (код bleow) и поместил на мою страницу, но все равно не работает.HTML нажмите, чтобы просмотреть и скрыть бюллетень

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="mydc.css" /> 
     <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="thickbox-compressed.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /> 
     <script type="text/javascript"> 
      // some javascript functions here 
     </script> 
    </head> 

    <body> 
     <div id="title"><h1>My tool</h1></div> 
     <table id="bulletin" class="invis"> 
      <tr class="invis"> 
       <td class="invis"> 
        <div id="bulletinslider"> 
         <a style="color:red;"> 
          Updated 2013.05.04 (Click to view/hide bulletin)</a><br/><br/> 
        </div> 
        <div id="updates" style="display:none;"> 
         <u>New changes</u> 
         <ul> 
          <li>some update aaa bbb.</li> 
         </ul><br/> 
         <u>Previous changes</u> (2012.11.27) 
         <ul> 
          <li>some update ccc ddd.</li> 
          <li>some update eee fff.</li> 
          <li>some update ggg hhh.</li> 
          <li>some update iii jjj<br/></li> 
         </ul><br/> 
         <u>Announcements</u> 
         <ul><li>None.</li></ul><br/><br/> 
        </div> 
       </td> 
      </tr> 
     </table> 
    <!-- html code with php scripts continue --> 
    </body> 
</html>

И в файле CSS (mydc.css)

.invis { 
    background-color:inherit; 
    border-style:none; 
}

Почему щелкающий бюллетень не работает? Кроме того, я не совсем понял, как срабатывал щелчок по бюллетеню. Спасибо за помощь!

источник

2013-06-05 Tony Xu

Где код, который вызывает щелчок? И, пожалуйста, отформатируйте HTML-код перед тем, как вставить здесь. Мне очень сложно понять вложенность :-) – krishgopinath

Не знаю много о css. предположим, что в css должно быть что-то для id = "bulletinslider" или что-то для class = "invis", чтобы вызвать функцию щелчка? HTML-тэги переформатированы. Благодарю. –

Я думаю, что код для запуска действия лежит в javascript. Поэтому добавьте этот код и к вопросу ... и пока вы на нем, удалите множественную ссылку jquery - вы делаете это два раза – krishgopinath

Я думаю, что вам не хватает click событий в вашем JavaScript-коде. Пожалуйста, проверьте свой код, если он существует. Вы можете построить click событие, чтобы переключить свой updared элемент информации, как это:

$("#bulletinslider a").click(function() { 
    //will either show or hide updates div depending on its state currently 
    $("#updates").toggle(100); 
});

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

Так что не забудьте проверить js click событий. Для получения дополнительной документации по этим событиям щелчка перейдите на jquery.com. Также 'читать на event delegation

источник

2013-06-05 19:58:50 krishgopinath

да, вы правы. –

HTML нажмите, чтобы просмотреть и скрыть бюллетень

ответ

Смежные вопросы