Question

我有两个语义侧边栏，一个在左边，一个在右边。当前，当仅切换左侧页面时，页面变暗，但是当选择右侧页面时，页面不变暗。我想要实现的是，当我切换左侧边栏打开并且右侧边栏已经切换时，我希望页面变暗。

切换右侧边栏的代码：

  getHistory(){
    $('#sidebar1').sidebar({dimPage:false,overlay:true,closable:false}).sidebar('toggle');

    this.historyPane = true;
  }

切换左侧边栏的代码：

onSubmit(event){
    if(event.key=="Enter"){
    .
    .
    .
    $('#sidebar').sidebar({overlay:false,dimPage:true}).sidebar('toggle');
    }

我尝试使用.is(:visible)方法检查左侧边栏是否可见，但即使侧边栏未切换，也会返回true。我有什么建议可以实现这个目标吗？

Answer 1

您可以使用此SUI方法检查是否已打开另一个侧边栏：

$('#sidebar1').sidebar("is visible")

有了这个，你可以做这样的事情

onSubmit(event){
if(event.key=="Enter"){

.
.
.

const shouldDimPage = $('#sidebar1').sidebar("is visible")
$('#sidebar').sidebar({overlay:false, dimPage: shouldDimPage}).sidebar('toggle');
}

同样，如果需要，您可以使用$('#sidebar1').sidebar('is hidden')

语义ui - 基于是否切换另一个组件来设置侧边栏属性

1 个答案: