Question

以下是导航栏的定义，导航栏是在多个屏幕中使用的视图模板的一部分：

    <div data-role="layout" data-id="app">
        <header data-role="header">
          <div data-role="navbar">
              <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
              <span data-role="view-title">Title</span>
              <a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
          </div>
        </header>
    </div>

仅在某些屏幕上需要“完成”按钮，因此在主页加载时会隐藏它：

    $("#btnDone").hide();

隐藏按钮工作正常，但再次显示它不起作用：

    $("#btnDone").show();

该按钮未显示。

Answer 1

而不是使用$("#btnDone").hide();和$("#btnDone").show();使用：

隐藏按钮：

$("#btnDone").css("visibility", "hidden");

显示按钮：

$("#btnDone").css("visibility", "visible");

Answer 2

在这种情况下对我有用的是在我想要显示/隐藏的按钮上放一个课而不是依赖于id：

<div data-role="layout" data-id="app">
    <header data-role="header">
      <div data-role="navbar">
          <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
          <span data-role="view-title">Title</span>
          <a class="nav-button btnDone" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
      </div>
    </header>
</div>

然后使用该类隐藏它：

$(".btnDone").hide();

希望这也适合你。

Answer 3

萨拉姆，
请尝试以下方法：

 <!--Home-->
    <div id="tabstrip-home"
         data-role="view"
         data-init="app.home"
         data-title="Home">

        <!--Header-->
        <header data-role="header">
          <div data-role="navbar">
              <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
              <span data-role="view-title">Title</span>
              <a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
          </div>
        </header>

        <!--Content-->
        <div class="view-content">
          <h1>Hide / Show Navbar Elements</h1>
            <p>
              <center>
                <a data-align="left" data-role="button" data-click="app.show">Show</a>
              </center>
              <br />
              <center>
                <a data-align="left" data-role="button" data-click="app.hide">Hide</a>
              </center>
            </p>

        </div>
    </div>

在data-init =“app.home”函数中，您可以找到导航栏，然后是leftElement，并且可以对它们进行引用，然后您可以控制它，示例：

var navbar = null;
var left = null;
global.app.home = function (e) {
  navbar = e.sender.header.find('div[data-role="navbar"]').data('kendoMobileNavBar');
    left = navbar.leftElement;
    console.log(left);

};

 global.app.show = function (e) {
  left.show();
};

 global.app.hide = function (e) {
  left.hide();
};

请在此处查看工作示例：http://jsbin.com/EpInoQOq/1/edit
此致

Answer 4

我处理隐藏和在不同视图上显示后退按钮的方式是使用2种不同的布局。这适用于我的用例，因为我只在1页上显示后退按钮：

        <!--Default Layout with Main Menu and no backbutton-->
        <div data-role="layout" data-id="layout">

            <!--Header-->
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>

            <!--Footer-->
            <div data-role="footer">
                <div data-role="tabstrip">
....
                </div>
            </div>
        </div>

        <!--Layout with Back Button-->
        <div data-role="layout" data-id="layoutBackButton">

            <div data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" data-align="left">
                        <!-- data-bind="isVisible: showBackButton" -->
                        <i class="fa fa-chevron-left fa-lg"></i>
                    </a>
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>

使用“后退”按钮的“我的远程视图”然后指定其他布局：

<div         data-layout="layoutBackButton"
             data-role="view"
...>

kendo：导航栏中的启用/禁用按钮

4 个答案: