在rmarkdown中使用选项卡时,防止TOC崩溃(返回顶部)

时间:2020-10-01 16:48:17

标签: html r-markdown tableofcontents

在rmarkdown中,当使用浮动TOC和嵌套选项卡时,我遇到了一个问题,其中TOC返回到“顶部”选项卡。例如,如果我正在查看Even more details about Bar here选项卡中的Bar子选项卡,然后单击该子选项卡中TOC中的内容,则它将继续折叠TOC并返回到“顶部”标签。另外,如果我单击目录中一个子选项卡的标题,一旦我开始滚动,目录就会折叠回到“顶部”选项卡。下面的示例代码。

是否可以防止TOC的“未请求”折叠/返回“顶部”选项卡,将TOC锚定到当前选项卡或子选项卡?或者,目录可能只显示当前选项卡或子选项卡的目录项以防止此问题?

---
title: "test"
author: "tester"
date: "10/1/2020"
output:
  html_document:
    toc: true
    toc_float: true
    toc_collapsed: false
    number_sections: false
    toc_depth: 3
    theme: united
    code_folding: hide
---


<style type="text/css">

body{ /* Normal  */
      font-size: 16px;
  }
  
h1.title {
  font-size: 38px;
  color: DarkRed;
}
h1 { /* Header 1 */
  font-size: 28px;
  color: DarkGrey;
}
h2 { /* Header 2 */
    font-size: 24px;
  color: DarkGrey;
}
h3 { /* Header 3 */
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlue;
}

table, td, th {
  border: none;
  padding-left: 10px;
  padding-right: 1em;
  min-width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
</style>


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)

```
# FooBar {.tabset .unlisted}

## Foo {.tabset}
### More Details about Foo here
<h2> Foo Details </h2> 
<h3> Foo Reference  </h3>
1. Foo book

***
<h3> Foo styles </h3>
<h3> *First* </h3>
Very fun example.

<h3> *Second*</h3>
Equally fun.

<h3>*Third*</h3>
Almost as fun.

***
<h3>Foo Process</h3>
<h3> *Process prep*</h3>
1. Put it all together.

### Even more Details about Foo here
<h2> Foo Details 2 </h2> 
<h3> Foo Reference 2  </h3>
1. Foo book 2

***
<h3> Foo styles 2 </h3>
<h3> *First 2* </h3>
Very fun example 2.

<h3> *Second 2*</h3>
Equally fun 2.

<h3>*Third 2*</h3>
Almost as fun 2.

***
<h3>Foo Process 2</h3>
<h3> *Process prep 2*</h3>
1. Put it all together 2.

## Bar {.tabset}
### More Details about Bar here
<h2> Bar Details </h2> 
<h3> Bar Reference  </h3>
1. Bar book

***
<h3> Bar styles </h3>
<h3> *First* </h3>
Very fun example.

<h3> *Second*</h3>
Equally fun.

<h3>*Third*</h3>
Almost as fun.

***
<h3>Bar Process</h3>
<h3> *Process prep*</h3>
1. Put it all together.

### Even more Details about Bar here
<h2> Bar Details 2 </h2> 
<h3> Bar Reference 2  </h3>
1. Bar book 2

***
<h3> Bar styles 2 </h3>
<h3> *First 2* </h3>
Very fun example 2.

<h3> *Second 2*</h3>
Equally fun 2.

<h3>*Third 2*</h3>
Almost as fun 2.

***
<h3>Bar Process 2</h3>
<h3> *Process prep 2*</h3>
1. Put it all together 2.


***
<h3>Additional Item</h3>
<h3> *Make longer*</h3>
To demonstrate my issue.

<h3>Additional Item2</h3>
<h3> *Make longer2*</h3>
To demonstrate my issue2.

<h3>Additional Item3</h3>
<h3> *Make longer3*</h3>
To demonstrate my issue3.

<h3>Additional Item4</h3>
<h3> *Make longer4*</h3>
To demonstrate my issue4.

0 个答案:

没有答案