jquery - problemer med jQuery - slideToggle - Udvikleren.dk

Tags: jquery

<< < 1 2 > >>

Bruger #16353 @ 07.01.12 20:43

Hej

jeg har lavet en lille "slideToggle", og har prøve frem og tilbage, Det virker overhovedet ikke på nogle måde, synes bare ikke det på nogle måde..

sådan ser det ud i html:

HTML kode

 <input type="button" value="læse mere" id="knap">
          <div id="box">
          <p>Hej</p>
          </div>

sådan her ser det ud i jQuery;

JScript kode

 <script type="text/javascript">
 $("#knap").click(function() {
     $("#box").slideToggle();
 });
 </script>

Her kan du / i se problem;

http://localhostr.com/files/DsW2iOJ/capture.png

19 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 11 karma

Sorter efter stemmer Sorter efter dato

Bruger #15754 @ 08.01.12 01:19

989

Problemmet er løst, der manglede display:none så den var skjult fra starten af.

Bruger #8884 @ 08.01.12 01:16

300

Hvis den ikke skal vises når man kommer ind på siden kan du bruge .hide() funktionen:

JScript kode

 $(document).ready(function() {
     #('#box').hide();
 });

Bruger #15754 @ 07.01.12 22:08

989

Der tager i begge fuldstændig fejl. Det er lige meget om diven har en fast eller variable højde og bredde.

Se et eksempel her hvor teksten styrer højden og bredden på diven.

Udvidet eksempel med click event

HTML kode

 <p class="click">Klik mig</p>
 <div>
     asdsa
     asdasdas
     <br>
     asd
     <br>
     asd
     asd
     asd
 </div>

JScript kode

 $(document).ready(function() {
      $('.click').click(function() {
          $('div').slideToggle('slow');
      });
  });

Indlæg senest redigeret d. 07.01.2012 22:15 af Bruger #15754

Bruger #14816 @ 07.01.12 21:01

451

Du har selfølgelig sørget for at #box har en fast bredde samt højde?
Du mangles desuden at tilføje hastigheden f.eks

$("#box").slideToggle("slow");

Bruger #15754 @ 08.01.12 00:21

989

HTML kode

 <!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8">
  <title>Alt til dig! | Fed musik</title>
  <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js">
 </script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
  <script type="text/javascript">
  tinyMCE.init({
          mode : "textareas"
  });
  </script>
  <script>
  $(document).ready(function() {
          $("#knap").click(function(e) {
              e.preventDefault();
              $("#box").slideToggle();
          });
     });
     </script>
  <link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
  <body>
  <!--topmenu-->
  <?php include("include/topmenu.php");?>
  <!--Logo-->
  <?php include("include/logo.php");?>
  <div id="wrapper">
      <!--Menu-->
      <?php include("include/menu.php");?>
      <!--Banner-->
      <?php include("include/banner.php");?>
      <div id="loginbox">
      <form action="login.php" method="post">
       <input type="text" name="brugernavn" placeholder="Brugernavn">
       <input type="text" name="password" placeholder="Password">
       <input type="submit" value="Login" id="inputlogin">
       </form>
       <form action="opret.php" method="post">
        <input type="submit" value="Opret" id="inputopret">
        </form>
      </div>
      <div id="content">
      <h1>Opret bruger</h1>
       <form action="indsaet.php" method="post">
              <li id="brugernavn"><input type="text" name="brugernavn" placeholder="Brugernavn"></li>
           <li id="pass"><input type="password" name="password" placeholder="Password"></li>
           <li id="pass"><input type="password" name="gentag" placeholder="Password gentag igen"></li>
           <li id="face"><input type="text" name="facebook" placeholder="Facebook Link"><input type="button" value="læse mere" id="facebox"></li>
           <div id="boxface">
           <!--her skal der blevet skrevet et eller andet-->
           </div>
           <li id="dj"><input type="text" name="djnavn" placeholder="Dj navn"><input type="button" value="læse mere" id="djbox"></li>
           <div id="boxj">
           <!--her skal der blevet skrevet et eller andet-->
           </div>
           <li id="verden"><input type="text" name="land" placeholder="Land"></li>
           <li id="email"><input type="text" name="email" placeholder="E-mail"><input type="button" value="læse mere" id="knap">
           <div id="boxmail">
           <!--her skal der blevet skrevet et eller andet-->
           </div></li>
           
           <li id="tekst"><p>Profil Tekst:</p></li>
           <label for="profiltekst"></label>
           <textarea name="profiltekst" id="profiltekst"></textarea>
           <br>
           <input type="submit" value="Opret Bruger">
       </form>    
      </div>
      <!--Checkmark-->
      <?php include("include/checkmark.php");?>
  
  
  <div id="footer">
  <li><a href="http://jesperbok.dk/">Lavet af Jesper Petersen</a> - Design & kode af Jesper Petersen &reg;</li>
  </div>
  </div>
  </body>
  </html>

Edit. Fjernet domæne fra html efter ønske fra Jesper P.

Indlæg senest redigeret d. 23.05.2012 09:02 af Bruger #15754

Bruger #8884 @ 07.01.12 22:03

300

Som Martin siger skal din div have fast højde og bredde.

Derudover er det en god ide at tjekke om dokumentet er klar ved at bruge .ready funktionen.

Kodeeksempel:

HTML kode

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
 <script type="text/javascript>
 $(document).ready(function() {
     $('#knap').click(function() {
         $('#box').slideToggle('slow');
     }
 });
 </script>
 <div id="knap">Læs mere<div>
 <div id="box" style="height:100px;width:200px">Goddag!</div>

JScript kode

 $(document).ready(function() {
     $('#knap').click(function() {
         $('#box').slideToggle('slow');
     }
 });

Indlæg senest redigeret d. 07.01.2012 22:07 af Bruger #8884

Bruger #16353 @ 07.01.12 23:49

-108

ingen af dem virker hos mig..

den ser sådan her ud hos mig;

JScript kode

 <li id="email"><input type="text" name="email" placeholder="E-mail"><input type="button" value="læse mere" id="knap">
          <div id="box">
          <h1>Hello</h1>
          </div></li>

Bruger #8884 @ 07.01.12 23:54

300

Husk at inkluder både jQuery og JavaScript koden i din sides kildekode:

HTML kode

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
 <script type="text/javascript>
 $(document).ready(function() {
      $('#knap').click(function() {
          $('#box').slideToggle('slow');
      }
 });
 </script>
 
 <li id="email"><input type="text" name="email" placeholder="E-mail"><input type="button" value="læs mere" id="knap">
 <div id="box">
 <h1>Hello</h1>
 </div></li>

Bruger #15754 @ 07.01.12 23:54

989

Din input skaber et postback også ser du aldrig animationen.

Opdater din javascript til dette også forekommer postbacket aldrig.

JScript kode

 $(document).ready(function() {
       $('.click').click(function(e) {
           e.preventDefault();          
           $('div').slideToggle('slow');
       });
   });

Bruger #8884 @ 07.01.12 23:58

300

Din input skaber et postback også ser du aldrig animationen.

Opdater din javascript til dette også forekommer postbacket aldrig.
JScript kode
 $(document).ready(function() {
       $('.click').click(function(e) {
           e.preventDefault();          
           $('div').slideToggle('slow');
       });
   });

Der bliver da ikke postet noget så vidt jeg kan se, da der ingen form er, så det kan ikke være grunden.

<< < 1 2 > >>

problemer med jQuery - slideToggle

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler