Bootstrap Scrollspy 不适用于 Elm答案

【问题标题】：Bootstrap Scrollspy not working with ElmBootstrap Scrollspy 不适用于 Elm
【发布时间】：2016-05-24 12:59:19
【问题描述】：

我正在使用 index.html 来包含 JavaScript，例如 jQuery 和 Bootstrap。此外，一个 Elm-Application 被注入到body-node 中。然后由 Elm 生成整个视图。

在新版本中有一个 Bootstrap-navigation，其中应该包含 scrollspy 功能。它只是部分起作用，因为无论我在网站上的位置如何，只有最后一个可能的目标被突出显示。

这是 index.html：

<html>
  <head>
    <title>Elm-Application</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <!-- jQuery -->

    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <script src="js/classie.js"></script>

    <script src="js/cbpAnimatedHeader.js"></script>

    <script type="text/javascript" src="elm.js"></script>
  </head>

  <body id="page-top" class="index" data-spy="scroll" data-target=".navbar-fixed-top">
  </body>



  <script type="text/javascript">
    var elmApp = document.getElementById('page-top');
    app = Elm.Main.embed(elmApp,
      // The initial Model
      { location: "#"
      , width: window.innerWidth - 15
      , height: window.innerHeight
      , async_content: ""
    });
  </script>
</html>

我的（缩短的）Elm 应用程序：

view =
    div []
        [ nav [ class "navbar navbar-default navbar-fixed-top" ]
            [ div [ class "container" ]
                [ div [ class "navbar-header page-scroll" ]
                    [ button [ class "navbar-toggle", attribute "data-target" "#bs-example-navbar-collapse-1", attribute "data-toggle" "collapse", type' "button" ]
                        [ span [ class "sr-only" ]
                            [ text "Toggle navigation" ]
                        , span [ class "icon-bar" ]
                            []
                        , span [ class "icon-bar" ]
                            []
                        , span [ class "icon-bar" ]
                            []
                        ]
                    , a [ class "navbar-brand page-scroll", href "#page-top", onClick (Update.ClickedElem "#page-top") ]
                        [ text "Start Bootstrap" ]
                    ]
                , div [ class "collapse navbar-collapse", id "bs-example-navbar-collapse-1" ]
                    [ ul [ class "nav navbar-nav navbar-right" ]
                        [ li [ class "hidden" ]
                            [ a [ href "#page-top" ]
                                []
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#services", onClick (Update.ClickedElem "#services") ]
                                [ text "Services" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#portfolio", onClick (Update.ClickedElem "#portfolio") ]
                                [ text "Portfolio" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#about", onClick (Update.ClickedElem "#about") ]
                                [ text "About" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#team", onClick (Update.ClickedElem "#team") ]
                                [ text "Team" ]
                            ]
                        , li []
                            [ a [ class "page-scroll", href "#contact", onClick (Update.ClickedElem "#contact") ]
                                [ text "Contact" ]
                            ]
                        ]
                    ]
                , text "  "
                ]
            ]
        , section [ id "contact" ]
            [-- More content
            ]
          -- Much more content
        , section [ id "contact" ]
            [-- More content
            ]
        ]


type alias Model =
    { location : String
    , height : Int
    , width : Int
    , async_content : String
    }


type Msg
    = ClickedElem String

update : Msg -> Model -> ( Model, Cmd.Cmd Msg )
update msg model =
    case msg of
        _ ->
            ( model, Cmd.none )

最后，在启动网站时，无论如何，只有带有#contact 的href 的li 被突出显示。

【问题讨论】：

标签： twitter-bootstrap elm scrollspy

【解决方案1】：

问题不在于 Elm 代码，而在于 HTML 代码。我一开始就忘记了doctype 声明。

<!DOCTYPE html> 而不是 <html> 为我修复了它！感谢 Curt 和他在这里的回答：https://stackoverflow.com/a/36348841/3686898

【讨论】：