Bootstrap 3.3.7 hidden-lg-up无效

时间:2016-08-18 11:56:13

标签: javascript jquery css

我正在尝试设计一个我一直在努力的游戏的移动版本。为凌乱的代码道歉,这没什么大不了的。我决定在手机版上使用汉堡菜单,并希望将其隐藏在桌面设备上。为此,我在bootstrap文档中找到了“hidden-lg-up”,但它似乎没有起作用。我至少知道引导js已加载,因为如果我更改名称,我会在浏览器控制台中收到错误。

我正在尝试的元素是“汉堡菜单切换”和“汉堡包菜单”。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CEO Panel</title>
    <link rel="shortcut icon" href="favicon.png?v=1"/>
    <link rel="stylesheet" href="css/main.css">

    <!-- JQUERY -->
    <script src="js/libs/jquery-3.1.0.min.js"></script>
    <script src="js/libs/jquery-ui-1.12.0/jquery-ui.min.js"></script>

    <!-- LIBS AND PLUGINS -->
    <script src="js/libs/jquery-mousewheel-3.1.13/jquery.mousewheel.min.js"></script>
    <script src="js/libs/mapbox.js/jquery.mapbox.js"></script>
    <script src="js/libs/countdown/jquery.countdown.min.js"></script>
    <script src="js/libs/jquery.ui.touch-punch.min.js"></script>

    <!-- GAME JS -->
    <script src="js/game_logic/main.js"></script>
    <script src="js/game_logic/buttons.js"></script>

    <script src="js/libs/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <main>
      <div id="map-wrapper">
        <img id="map" src="res/los_santos_map.png" alt="Los Santos Map">
        <div id="map-content">
          <!--<div class="map-marker owned" id="warehouse1"></div>
          <div class="map-marker for-sale" id="warehouse2"></div>-->

          <?php
            $pdo = pdo();
            $username = $_SESSION['username'];

            foreach($pdo->query("SELECT * FROM warehouses") as $row){
              $warehouse_id = $row['id'];
              $statement = $pdo->prepare("SELECT * FROM warehouse_contracts WHERE warehouse_id LIKE '$warehouse_id' AND username LIKE '$username'");
              $statement->execute();
              $rowCount = $statement->rowCount();

              //find out the size of the warehouse
              if($row['slots'] < 64){
                $size = "small";
              }
              else if($row['slots'] >= 64 && $row['slots'] < 256){
                $size = "medium";
              }
              else{
                $size = "large";
              }

              //find out if it's owned by the user
              if($rowCount>0){
                echo '<div class="map-marker owned ' . $size . '" id="warehouse' . $row['id'] . '" style="top: ' . $row['y'] . 'px; left: ' . $row['x'] . 'px;"></div>';
              }
              else{
                echo '<div class="map-marker for-sale ' . $size . '" id="warehouse' . $row['id'] . '" style="top: ' . $row['y'] . 'px; left: ' . $row['x'] . 'px;"></div>';
              }
            }
          ?>
        </div>
      </div>
      <div style="background-image: url('res/radar-overlay.png'); width: 100%; height: 100%; position: fixed; background-size: cover; opacity: 0.2; pointer-events: none;"></div>

      <div id="HUD">
        <div id="hamburger-menu-toggle" class="hidden-lg-up">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div id="hamburger-menu" class="hidden-lg-up">

        </div>

        <a href="index.php?page=logout"><div id="logout" class="button">LOGOUT</div></a>

        <?php
          if(isset($_SESSION['admin']) && $_SESSION['admin'] === "TRUE"){
            echo '
              <div id="admin-stats">
                <h1>map.x: <span id="map_x"></span><br>map.y: <span id="map_y"></span></h1>
                <h1>map.height: <span id="map_height"></span><br>map.width: <span id="map_width"></span><br>mouse.x: <span id="mouse_x"></span><br>mouse.y: <span id="mouse_y"></span></h1>
              </div>
            ';
          }
        ?>

        <h1 id="cash">
          <?php
            $pdo = pdo();
            $username = $_SESSION['username'];
            $statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE '$username'");
            $statement->execute();
            $results = $statement->fetch();

            echo '$' . number_format($results['cash']);
          ?>
        </h1>

        <div id="warehouse-toggle">
          <div class="button toggle-selected">ALL</div>
          <div class="button toggle">OWNED</div>
          <div class="button toggle">SMALL</div>
          <div class="button toggle">MEDIUM</div>
          <div class="button toggle">LARGE</div>
        </div>

        <div id="stock-actions">
          <?php
            $pdo = pdo();
            $username = $_SESSION['username'];
            $statement = $pdo->prepare("SELECT * FROM shipments WHERE status LIKE 'active' AND username LIKE ?");
            $statement->bindParam(1, $username);
            $statement->execute();
            $row_count = $statement->rowCount();

            if($row_count == 0){
              echo '
                <div id="buy-stock-button" class="button">BUY</div>
              ';

              $statement = $pdo->prepare("SELECT * FROM storage WHERE username LIKE ?");
              $statement->bindParam(1, $username);
              $statement->execute();
              $row_count = $statement->rowCount();
              if($row_count > 0){
                echo '
                  <div id="sell-stock-button" class="button">SELL</div>
                ';
              }
              else{
                echo '
                  <div id="sell-stock-button" class="button disabled">SELL</div>
                ';
              }
            }
            else{
              echo '
                <div id="buy-stock-button" class="button disabled">BUY</div>
                <div id="sell-stock-button" class="button disabled">SELL</div>
              ';
            }
          ?>
          <div id="upgrades-button" class="button">UPGRADES</div>
        </div>

        <div id="page-toggle">
          <div class="button toggle">SUMMARY PAGE</div>
          <div class="button toggle-selected">WAREHOUSE MAP</div>
        </div>

        <div class="dialog" id="owned-warehouse-dialog">
          <div class="close-button">x</div>
        </div>

        <div class="dialog" id="buy-warehouse-dialog">
          <div class="close-button">x</div>

          <?php
            /*
            $pdo = pdo();
            $warehouse_id = $_GET['warehouse_id'];
            $statement = $pdo->prepare("SELECT * FROM warehouses WHERE id LIKE ?");
            $statement->bindParam(1, $warehouse_id);
            $statement->execute();
            $warehouse = $statement->fetch();

            echo '
              <h1>WAREHOUSE ' . $warehouse_id . '</h1>
              <p>STATUS:<span class="right-text">FOR SALE</span></p>
              <p>WAREHOUSE SLOTS:<span class="right-text">' . $warehouse['slots'] . '</span></p>
              <p>COST:<span class="right-text">' . $warehouse['price'] . '</span></p>

              <div class="submit-button">BUY</div>
            ';
            */
          ?>
        </div>

        <div class="dialog" id="buy-warehouse-dialog"></div>

        <div class="dialog" id="buy-stock-dialog">
          <div class="close-button">x</div>

          <form action="index.php?action=buy_crates" method="post">
            <h1>BUY CARGO CRATES</h1>
            <p>TYPE</p>
            <div class="selection-list">
              <?php
                $pdo = pdo();
                foreach($pdo->query("SELECT * FROM crate_types") as $row){
                  echo '<div class="button toggle">' . strtoupper($row['name']) . '</div>';
                }
              ?>
              <input class="hidden" name="type" type="text" required>
            </div>
            <p>QUANTITY</p>
            <div class="selection-list">

              <?php
                $pdo = pdo();
                $username = $_SESSION['username'];

                $statement = $pdo->prepare("SELECT SUM(slots) FROM warehouses INNER JOIN warehouse_contracts ON warehouses.id=warehouse_contracts.warehouse_id WHERE username LIKE '$username'");
                $statement->execute();
                $slots = $statement->fetch();

                $statement = $pdo->prepare("SELECT SUM(quantity) FROM storage WHERE username LIKE ?");
                $statement->bindParam(1, $username);
                $statement->execute();
                $crates = $statement->fetch();

                $statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE username LIKE ? AND type LIKE 'storage'");
                $statement->bindParam(1, $username);
                $statement->execute();
                $storage_upgrades = $statement->rowCount() + 1;

                $available_slots = $slots['SUM(slots)'] - $crates['SUM(quantity)'];

                if($available_slots >= 1 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 1 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 1 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots >= 2 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 2 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 2 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots >= 4 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 4 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 4 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots >= 8 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 8 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 8 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots >= 16 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 16 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 16 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots >= 32 * pow(2, $storage_upgrades)){
                  echo '<div class="button toggle">' . 32 * pow(2, $storage_upgrades) . '</div>';
                }
                else{
                  echo '<div class="disabled">' . 32 * pow(2, $storage_upgrades) . '</div>';
                }

                if($available_slots < 1 * pow(2, $storage_upgrades)){
                  echo '
                    <input class="hidden" name="quantity" type="text" required>
                  </div>
                  <p>RISK:<span class="right-text" id="delivery-risk">0%</span></p>
                  <p>PROFIT MARGIN:<span class="right-text" id="delivery-profit">0%</span></p>
                  <p>PRICE:<span class="right-text" id="delivery-price">$0</span></p>
                  <input class="submit-button disabled" type="submit" value="BUY">
                ';
                }
                else{
                  echo '
                    <input class="hidden" name="quantity" type="text" required>
                  </div>
                  <p>RISK:<span class="right-text" id="delivery-risk">0%</span></p>
                  <p>PROFIT MARGIN:<span class="right-text" id="delivery-profit">0%</span></p>
                  <p>PRICE:<span class="right-text" id="delivery-price">$0</span></p>
                  <input class="submit-button" type="submit" value="BUY">
                ';
                }
              ?>


          </form>
        </div>

        <div class="dialog" id="sell-stock-dialog">
          <div class="close-button">x</div>
          <?php
            $pdo = pdo();
            $statement = $pdo->prepare("SELECT SUM((price*((profit/100)+1))*quantity), SUM(price*quantity), SUM(quantity), AVG(profit) FROM storage INNER JOIN crate_types ON storage.crate_type_id=crate_types.id WHERE username LIKE ?");
            $statement->bindParam(1, $username);
            $statement->execute();
            $rows = $statement->fetch();
            $quantity = $rows['SUM(quantity)'];
            $value = round($rows['SUM((price*((profit/100)+1))*quantity)'], 0);
            $original_cost = round($rows['SUM(price*quantity)'], 0);
            $profit_margin = round($rows['AVG(profit)'], 0);

            echo '
                <h1>SELL CARGO CRATES</h1>
                <p>CRATES: <span class="right-text">' . $quantity . '</span></p>
                <p>RISK: <span class="right-text"></span></p>
                <p>PROFIT MARGIN: <span class="right-text">' . $profit_margin . '%</span></p>
                <p>ORIGINAL COST: <span class="right-text">$' . number_format($original_cost) .'</span></p>
                <p>PROFIT: <span class="right-text">$' . number_format($value - $original_cost) . '</span></p>
                <p>TOTAL VALUE: <span class="right-text">$' . number_format($value) .'</span></p>
                <a href="index.php?action=sell_crates"><div class="submit-button">SELL</div></a>
            ';
          ?>
        </div>

        <?php
          $pdo = pdo();
          $username = $_SESSION['username'];
          $statement = $pdo->prepare("SELECT * FROM shipments WHERE username LIKE '$username' AND status LIKE 'active' LIMIT 1");
          $statement->execute();
          $row_count = $statement->rowCount();
          $row1 = $statement->fetch();

          $statement = $pdo->prepare("SELECT * FROM shipments INNER JOIN crate_types ON shipments.crate_type_id=crate_types.id WHERE username LIKE '$username' AND status LIKE 'active' LIMIT 1");
          $statement->execute();
          $row2 = $statement->fetch();

          if($row_count > 0){
            echo '<div id="active-shipment">';
            if($row1['type'] === "purchase"){
              echo '
                <h1 id="countdown"></h1>
                <p>Incoming shipment of ' . $row2['quantity'] . ' crates of ' . $row2['name'] . '</p>
              ';
            }
            else if($row1['type'] === "sale"){
              echo '
                <h1 id="countdown"></h1>
                <p>Outgoing shipment of ' . $row1['quantity'] . ' crates with a value of $' . number_format($row1['value']) . '</p>
              ';
            }
            echo '
              </div>
              <script type="text/javascript">
                  $("#countdown").countdown("' . $row1['arrival'] . '", function(event) {
                    var arrival = {
                      days: event.strftime("%D"),
                      hours: event.strftime("%H"),
                      minutes: event.strftime("%M"),
                      seconds: event.strftime("%Ss")
                    };

                    if(arrival.days <= 0){
                      arrival.days = "";
                    }
                    else{
                      arrival.days += "d";
                    }

                    if(arrival.hours <= 0){
                      arrival.hours = "";
                    }
                    else{
                      arrival.hours += "h";
                    }

                    if(arrival.minutes <= 0){
                      arrival.minutes = "";
                    }
                    else{
                      arrival.minutes += "m";
                    }

                      $(this).text(arrival.days + " " + arrival.hours + " " + arrival.minutes + " " + arrival.seconds);

                    if(new Date("' . $row1['arrival'] . '") <= new Date()){
                      window.location.replace("index.php");
                    }
                    });

                  $("title").countdown("' . $row1['arrival'] . '", function(event){
                    var arrival = {
                      days: event.strftime("%D"),
                      hours: event.strftime("%H"),
                      minutes: event.strftime("%M"),
                      seconds: event.strftime("%Ss")
                    };

                    if(arrival.days <= 0){
                      arrival.days = "";
                    }
                    else{
                      arrival.days += "d";
                    }

                    if(arrival.hours <= 0){
                      arrival.hours = "";
                    }
                    else{
                      arrival.hours += "h";
                    }

                    if(arrival.minutes <= 0){
                      arrival.minutes = "";
                    }
                    else{
                      arrival.minutes += "m";
                    }

                    $(this).text(arrival.days + " " + arrival.hours + " " + arrival.minutes + " " + arrival.seconds + " - CEO Panel");
                    });
              </script>
            ';
          }
        ?>

        <div class="dialog" id="upgrades-dialog">
          <div class="close-button">x</div>
          <h1>UPGRADES</h1>

          <p>TRANSPORT TRUCKS</p>
          <p style="font-size: 16px;">These trucks are used for <strong>purchases</strong>.</p>
          <?php
            $upgrade_cost = calculate_upgrade_cost("trucks", "speed");

            $pdo = pdo();
            $statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
            $statement->bindParam(1, $_SESSION['username']);
            $statement->execute();
            $user = $statement->fetch();

            $statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE vehicle LIKE 'trucks' AND username LIKE ? AND type LIKE 'speed'");
            $statement->bindParam(1, $username);
            $statement->execute();
            $previous_upgrades = $statement->rowCount();

            $crate_delivery_time = explode('.', 1 * (3 * (1 - ($previous_upgrades * 0.03))));

            if(strpos((string)$crate_delivery_time[0], "-") !== false){
              $crate_delivery_time[0] = 0;
              $crate_delivery_time[1] = 0;
            }

            if(($crate_delivery_time[0] <= 0 && $crate_delivery_time[1] <= 0) || $crate_delivery_time[0] < 0){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
                  <div class="upgrade-cost">Limit for upgrades reached.</div>
                </div>
              ';
            }
            else if($user['cash'] < $upgrade_cost){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
                  <div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }
            else if($user['cash'] >= $upgrade_cost){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><a href="index.php?action=upgrade&vehicle=trucks&type=speed"><div class="upgrade-button">UPGRADE</div></a>
                  <div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }

            $upgrade_cost = calculate_upgrade_cost("trucks", "storage");

            $statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
            $statement->bindParam(1, $_SESSION['username']);
            $statement->execute();
            $user = $statement->fetch();

            if($user['cash'] >= $upgrade_cost){
              echo '
                <div class="upgrade">
                  <p>STORAGE</p><a href="index.php?action=upgrade&vehicle=trucks&type=storage"><div class="upgrade-button">UPGRADE</div></a>
                  <div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }
            else{
              echo '
                <div class="upgrade">
                  <p>STORAGE</p><div class="upgrade-button-disabled">UPGRADE</div>
                  <div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }
          ?>
          <!--
          <div class="upgrade">
            <p>STORAGE</p><a href="index.php?action=upgrade&vehicle=trucks&type=storage"><div class="upgrade-button">UPGRADE</div></a>
          </div>
          -->

          <br>
          <p>TRANSPORT PLANES</p>
          <p style="font-size: 16px;">These planes are used for <strong>sales</strong>.</p>
          <?php
            $upgrade_cost = calculate_upgrade_cost("planes", "speed");

            $pdo = pdo();
            $statement = $pdo->prepare("SELECT cash FROM users WHERE username LIKE ?");
            $statement->bindParam(1, $_SESSION['username']);
            $statement->execute();
            $user = $statement->fetch();

            $statement = $pdo->prepare("SELECT * FROM transport_upgrades WHERE vehicle LIKE 'planes' AND username LIKE ? AND type LIKE 'speed'");
            $statement->bindParam(1, $username);
            $statement->execute();
            $previous_upgrades = $statement->rowCount();

            $crate_delivery_time = explode('.', 1 * (3 * (1 - ($previous_upgrades * 0.03))));

            if(strpos((string)$crate_delivery_time[0], "-") !== false){
              $crate_delivery_time[0] = 0;
              $crate_delivery_time[1] = 0;
            }

            if(($crate_delivery_time[0] <= 0 && $crate_delivery_time[1] <= 0) || $crate_delivery_time[0] < 0){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
                  <div class="upgrade-cost">Limit for upgrades reached.</div>
                </div>
              ';
            }
            else if($user['cash'] < $upgrade_cost){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><div class="upgrade-button-disabled">UPGRADE</div>
                  <div class="upgrade-cost">COST <span class="right-text red-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }
            else if($user['cash'] >= $upgrade_cost){
              echo '
                <div class="upgrade">
                  <p>SPEED</p><a href="index.php?action=upgrade&vehicle=planes&type=speed"><div class="upgrade-button">UPGRADE</div></a>
                  <div class="upgrade-cost">COST <span class="right-text">$' . number_format($upgrade_cost) . '</span></div>
                </div>
              ';
            }
          ?>
        </div>

        <div id="warehouse-space">
          <div id="used-space"></div>
          <p>Used warehouse space:
            <?php
              $pdo = pdo();
              $username = $_SESSION['username'];
              $statement = $pdo->prepare("SELECT SUM(slots) FROM warehouses INNER JOIN warehouse_contracts ON warehouses.id=warehouse_contracts.warehouse_id WHERE username LIKE '$username'");
              $statement->execute();
              $row = $statement->fetch();
              $slots = $row['SUM(slots)'];

              $statement = $pdo->prepare("SELECT SUM(quantity) FROM storage WHERE username LIKE '$username'");
              $statement->execute();
              $row = $statement->fetch();
              $crates = $row['SUM(quantity)'];

              if($crates === 0 || !isset($crates)){
                $crates = 0;
              }

              $percentage_used = round(($crates/$slots)*100, 1);

              echo $crates . '/' . $slots . ' (' . $percentage_used . '%)';
            ?>
          </p>
            <?php
              echo '
                <script>
                  $("#used-space").css("width", ' . $percentage_used . ' + "%");
                </script>
              ';
            ?>
        </div>
      </div>

      <div id="summary"></div>

      <?php
        if(isset($_SESSION['random_event']) && $_SESSION['random_event']['recent'] === true){
          $robbers = array(
            "Hell's Angels",
            "The Lost",
            "some asian streetpunks",
            "a pair of irish virgins",
            "the russian mob",
            "some methheads",
            "a korean crew"
          );

          if($_SESSION['random_event']['shipment_type'] === "purchase"){
            echo '
              <div class="alert-background"></div>
              <div class="alert">
                <img class="companion-speech" src="res/companion-speeches/random-event.png">
                <h1>Oh no!</h1>
                <p>Boss, I\'ve got some bad news. Your recent shipment of <strong>' . $_SESSION['random_event']['ordered_quantity'] . '</strong> crates was hijacked during transport by ' . $robbers[rand(0, count($robbers) - 1)] . '. They managed to get away with <strong>' . $_SESSION['random_event']['random_event_penalty'] . '</strong> crates. Though, your crew did kill <strong>' . rand(1, 20) . '</strong> of them before they took off with the product.</p>
                <div class="ok-button">OK</div>
              </div>
            ';
          }
          unset($_SESSION['random_event']);
        }
      ?>
    </main>
    <div id="loading">
      <p>Loading, please wait..</p>
    </div>
  </body>
</html>

3 个答案:

答案 0 :(得分:2)

在Bootstrap 3.x中,您需要使用class = "hidden-md hidden-lg"隐藏桌面上的内容(屏幕分辨率>= 992 pixels)。

<div id="HUD">
    <div id="hamburger-menu-toggle" class="hidden-md hidden-lg">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="hamburger-menu" class="hidden-md hidden-lg">

    </div>

Bootstrap 4仍处于alpha状态,因此我不推荐使用它,除了用于测试目的。

另外,请务必将其放入head部分:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

答案 1 :(得分:0)

此功能是新版bootstrap v4中的新功能,但您使用的是bootstrap 3,您可以使用.hidden-md.hidden-lg代替。

Bootstrap Doc

enter image description here

答案 2 :(得分:0)

你可以跳过使用bootstrap CSS,并像这样使用jQuery:

$(document).ready(function () {
  if ($(window).width() <= 997) {
    $('p').hide();
  }
  $(window).resize(function () {
    if ($(window).width() <= 997) {
      $('#hamburger-menu-toggle').hide();
    } else {
      $('#hamburger-menu-toggle').show();
    }
  });
});