Question

此处显示的演示http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview我面临两个可以使用简单的css / bootstrap代码解决的问题。

以下是我面临的问题。

1）当用户点击左侧的任何选项时，我试图在右侧显示内容。现在，当用户点击任何链接（操作系统软件包，选项二）时，内容将显示在plnkr演示中列出的选项中。当用户点击任何选项时，如何在右侧显示内容的任何建议。

2）第二个问题是，当用户点击某个选项时，它会显示内容，如果用户选择相同的选项则会再次隐藏内容。我不想在用户点击时再次隐藏内容同一个链接第二次。我试图修改ng-click但无法获得预期的输出。

html代码：

select w1.work as work
,if(w1.status = 'In Progress' or w2.status = 'In Progress',1,0) countInProgress
,@allInProgress := case when @allInProgress is null and w2.status = 'In Progress' then 1
                        when @allInProgress is null and (w2.status <> 'In Progress' or w2.status is null) then 0
                        when w2.status = 'In Progress' then @allInProgress * 1
                        when w2.status <> 'In Progress' then @allInProgress * 0
                        end allInProgress
from work w1 
left join work w2 on w1.work = w2.parent
where w1.parent is null
group by w1.work

js code：

<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div  ng-controller="MainCtrl">
  <div class="workspace">
    <div class="sidebar-wrap">
      <h3>Click below options:</h3>
      <div class="sidebar-contents">
    <a class="nav clearfix"
      ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
      ng-class="{ 'active' : showOsPackages }">
OS Packages  
     </a>
    <p>
    <a class="nav clearfix"
      ng-click="optionTwo=!optionTwo; showOsPackages=false"
      ng-class="{ 'active' : optionTwo }">

      Option Two

    </a>
    </p>
      </div>
    </div>
      <div class="" ng-show="showOsPackages">
    <h1>OS Packages</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>
    <div class="" ng-show="optionTwo">

    <h1>Option Two</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>

  </div>
</div>
</div>
</div>

任何建议都会有所帮助。

Answer 1

我检查了你的代码。以下是更正。

我试图在用户点击任何内容时在右侧显示内容选项存在于左侧。现在当用户点击时任何链接（OS包，选项二），内容都显示在下到plnkr演示中列出的选项。任何建议如何在用户右侧显示内容点击任何一个选项。

首先，我将您的内容包装在一个包含contents-wrap类的包装div中，然后sidebar-wrapper和contents-wrap可以分别设置为30%和70%，这样我们就能得到理想的结果。

<强> CSS：

.contents-wrap{
  display:inline-block;
  width:70%;
  float:left;
}

.sidebar-wrap{
  display:inline-block;
  width:30%;
  float:left;
}

第二个问题是，当用户点击某个选项时，它会显示内容，如果用户选择相同的选项则会再次隐藏内容。我不希望在用户点击同一链接时再次隐藏内容第二次。我试图修改ng-click但无法获得预期的输出。

为此，我建议将相应的变量设置为true，而不是切换输入。

LIVE

但是这里有一个更好的版本，你只使用一个变量toggle并将选定的标签名称设置为toggle变量，使用这种方法，减少了需要定义的变量数量。 / p>

Plunkr Demo

显示右侧的内容

1 个答案: