Προς το περιεχόμενο
  • 0
Συνδεθείτε  
Gunix

Πρόβλημα dropdown

Ερώτηση

Γεια σας.

 

Θα ήθελα την βοήθεια σας.

Θέλω να φτιάξω μια ιστοσελίδα και χρησιμοποιώ το bootstrap. Αλλά το πρόβλημα μου είναι ότι δεν μου δουλεύει το dropdown. Σας αναρτώ το html.

<!DOCTYPE html>
<html lang='eng'>
<head>
  <title>Interactive</title>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Responsive για mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Loaded Bootstrap Style-->
  <link rel="stylesheet" href="css/bootstrap.css">  <!-- Or <link href="css/bootstrap.min.css" rel="stylesheet"> -->
</head>

<body>

  <div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <!-- Loaded JavaScript -->

  <script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

10 απαντήσεις σε αυτή την ερώτηση

Προτεινόμενες αναρτήσεις

  • 0

ξέρεις γιατί δεν σου δουλεύει?

 

γιατί δεν έχεις βάλει jquery 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

check http://getbootstrap.com/getting-started/#template

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Στο console του browser τι βγαζει; φορτωνει σωστα το js αρχειο;

 

Αυτό μου βγάζει:

Error: Bootstrap's JavaScript requires jQuery  bootstrap.js:8:9

 

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Tzotzosgr είχα βάλει την jQuery. Αλλά δεν μου δούλευε γατί την είχα μετά από την JavaScript. Δηλαδή:

 

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

Αλλά γιατί αυτό? Γιατί βάζουμε πρώτα την jQuery και μετά την JavaScript?

 

 

ξέρεις γιατί δεν σου δουλεύει?

 

γιατί δεν έχεις βάλει jquery 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

check http://getbootstrap.com/getting-started/#template

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Γιατι το DOM παει απο πανω προς τα κατω, δηλαδη πρεπει πρωτα να φορτωσει τη jquery και μετα το js της bootstrap. Στη συγκεκριμενη περιπτωση το αρχειο bootstrap.min.js ζηταει πραγματα απο το αρχειο jquery αρα πρεπει να φορτωσει μετα.

 

Το ιδιο ισχυει με τα αρχεια css, αλλα απο την αναποδη. Δηλαδη αμα δηλωσεις κατι στο πρωτο αρχειο css και μετα πας και αλλαξεις αυτο που εχεις δηλωσει σε καποιο αλλο αρχειο css που φορτωνεις πιο μετα τοτε ισχυει το τελευταιο. (Εκτος και αν παιζεις με !important το οποιο δεν συνισταται).

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Το ιδιο ισχυει με τα αρχεια css, αλλα απο την αναποδη. Δηλαδη αμα δηλωσεις κατι στο πρωτο αρχειο css και μετα πας και αλλαξεις αυτο που εχεις δηλωσει σε καποιο αλλο αρχειο css που φορτωνεις πιο μετα τοτε ισχυει το τελευταιο. (Εκτος και αν παιζεις με !important το οποιο δεν συνισταται).

 

Δύο διορθώσεις.

 

Πρώτον, τα λες πολύ μπερδεμένα. Και με JS μπορείς να κάνεις ακριβώς το ίδιο που περιγράφεις με CSS. Βάλε ένα αρχείο να λέει window.foo = 1 και ένα άλλο window.foo = 2, αυτό που φορτώνεται δεύτερο θα "κερδίσει" στο τέλος.

 

Δεύτερον για τα CSS επειδή βάζεις και το !important μέσα νομίζω ότι επίσης τα έχεις μπερδεμένα. Ναι, αν έχεις δύο ΙΔΙΟΥΣ selectors που σετάρουν το ίδιο attribute τότε ο δεύτερος υπερισχύει, αλλά αν οι selectors έχουν διαφορετικό specificity δεν πάει έτσι.

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι εύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
Συνδεθείτε  
×
×
  • Δημιουργία νέου...

Χρήσιμες πληροφορίες

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.