【问题标题】:Bootstrap dropdown nav only working with current page in dynamic navigationBootstrap 下拉导航仅适用于动态导航中的当前页面
【发布时间】:2017-06-19 07:25:10
【问题描述】:

我在学习 PHP、SQL 等的同时建立了一个网站。 我现在正在尝试在原始页面上构建,我已经使用标准导航使每个工作正常,当我尝试添加引导导航栏时,下拉框仅出现在我当前所在的页面上。 在index.php 上,所有下拉菜单都不起作用。该页面在后端有一个 CMS,我试图让公共端看起来更好,并确保无论数据库中有多少新页面或主题,css 都适用于所有内容。

任何帮助将不胜感激!

额外问题:如果可能的话,我还希望克拉仅在“主题”与它相关联的页面超过一页时出现,我也无法弄清楚如何做到这一点。例如:所以当点击主题时,您点击时会转到其唯一的页面,但是如果页面超过 1 页,则会出现一个克拉特,并且您可以从下拉菜单中选择所需的页面

我的导航是一个功能,并且工作正常,它只是导致我最初问题的 css。

function public_navigation($subject_array, $page_array) {
        $output = "<nav class=\"navbar navbar-default\">";
        $output .= "<div class=\"container-fluid\">";
        $output .= "<div class=\"navbar-header\">";
        $output .= "<button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\"#myNavbar\">";
        $output .= "<span class=\"icon-bar\"></span>";
        $output .= "<span class=\"icon-bar\"></span>";
        $output .= "<span class=\"icon-bar\"></span>";
        $output .= "</button>";
        $output .= "<a class=\"navbar-brand\" href=\"index.php\">Company</a>";
        $output .= "</div>";
        $output .= "<div class=\"collapse navbar-collapse\" id=\"myNavbar\">";
        $output .= "<ul class=\"nav navbar-nav\">";
        $subject_set = find_all_subjects();
        while($subject = mysqli_fetch_assoc($subject_set)) {
            $output .= "<li class=\"dropdown\">";
            $output .= "<a class=\"dropdown-toggle\" data-toggle=\"dropdown\" href=\"index.php?subject=";
            $output .= urlencode($subject["id"]);
            $output .= "\">";
            $output .= htmlentities($subject["menu_name"]);
            $output .= "<span class=\"caret\"></span></a>";

            if ($subject_array["id"] == $subject["id"] || 
                $page_array["subject_id"] == $subject["id"]) {
                $page_set = find_pages_for_subject($subject["id"]);
                $output .= "<ul class=\"dropdown-menu\">";
                while($page = mysqli_fetch_assoc($page_set)) {
                    $output .= "<li>";
                    $output .= "<a href=\"index.php?page=";
                    $output .= urlencode($page["id"]);
                    $output .= "\">";
                    $output .= htmlentities($page["menu_name"]);
                    $output .= "</a></li>";
                }
                $output .= "</ul>";
                mysqli_free_result($page_set);
            }

            $output .= "</li>"; // end of the subject li
        }
        mysqli_free_result($subject_set);
        $output .= "</ul></div></div></nav>";
        return $output;
    }

编辑:This is what the menu looks like

但是,如果您单击任何其他标题,则不会出现下拉框,并且如果在带有通用欢迎页面的 index.php 上,则所有菜单都没有下拉框或让您导航到它们

【问题讨论】:

  • 因此您可以添加下拉菜单,但它们仅在您的当前页面中可见
  • 是的,没错,除非我在那个主题领域,否则它们不起作用,添加了一张图片以便更好地说明

标签: php css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

在不知道 $subject_array 和 $page_array 中传递了什么的情况下,很难说为什么会失败,但几乎可以肯定问题出现在你的 if 语句中:

if ($subject_array["id"] == $subject["id"] || $page_array["subject_id"] == $subject["id"]) {

看起来您根本不需要 if 语句,因为您希望每次都获取给定主题的页面。所以我建议你尝试删除 if 看看你得到了什么:

        $output .= "<span class=\"caret\"></span></a>";

        $page_set = find_pages_for_subject($subject["id"]);
        $output .= "<ul class=\"dropdown-menu\">";
        while($page = mysqli_fetch_assoc($page_set)) {
            $output .= "<li>";
            $output .= "<a href=\"index.php?page=";
            $output .= urlencode($page["id"]);
            $output .= "\">";
            $output .= htmlentities($page["menu_name"]);
            $output .= "</a></li>";
        }
        $output .= "</ul>";
        mysqli_free_result($page_set);

        $output .= "</li>"; // end of the subject li

现在您将拥有每个主题的下拉菜单,并且您只需要一个小的 if 语句来添加一些额外的 CSS 类或其他东西来显示哪个主题是当前选择的主题。

【讨论】:

  • 这解决了问题!谢谢!现在尝试使其成为插入符号和下拉列表仅在超过 1 页时出现:(
  • 更新您的代码以检查 count($page_set),并且仅在 count > 1 时使用下拉菜单 UI。否则,只需将其设为常规链接。如果您遇到困难,请在此处发表评论,我会帮助您。
  • 如果解决方案有帮助,也请投票。如果您知道如何让插入符号和下拉菜单仅在有子页面时出现,请告诉我。
猜你喜欢
  • 2021-08-27
  • 2011-03-11
  • 2020-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-20
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多